Video.js 8无法显示HLS画质选择选项的技术求助

核心问题分析 #

你的代码存在三个常见问题导致报错：

1. 初始化冲突：同时使用data-setup自动初始化和手动videojs()初始化，导致播放器重复初始化
2. 插件路径错误：videojs-hls-quality-selector的加载路径未指向node_modules，导致插件未正确加载
3. 初始化时机不当：用DOMContentLoaded触发插件初始化，未等待Video.js播放器完全就绪

修正后的完整代码 #

<?php
class VideoPlayer {

    private $video;

    public function __construct($video) {
        $this->video = $video;
    }

    public function create($autoPlay) {
        $autoPlayAttr = $autoPlay ? "autoplay" : "";
    
        $filePath = $this->video->getFilePath();
    
        echo <<<HTML
        <link href="node_modules/video.js/dist/video-js.min.css" rel="stylesheet">
        <script src="node_modules/video.js/dist/video.min.js"></script>
        <script src="node_modules/@videojs/http-streaming/dist/videojs-http-streaming.js"></script>
        <script src="node_modules/videojs-hls-quality-selector/dist/videojs-hls-quality-selector.min.js"></script>
        
        <style>
            .video-js {
                max-width: 940px;
                width: 940px;
                padding-top: 56.25%;
                height: 0;
                font-size: 13px;
            }
        </style>
    
        <video id="my-video" class="video-js" $autoPlayAttr controls preload="auto">
            <source src="$filePath" type="application/x-mpegURL">
        </video>

        <script>
            // 手动初始化播放器，避免自动初始化冲突
            var player = videojs('my-video', {
                autoplay: $autoPlay,
                html5: {
                    vhs: {
                        overrideNative: true
                    }
                }
            }, function() {
                // 播放器就绪后加载画质选择插件
                this.hlsQualitySelector({
                    displayCurrentQuality: true // 显示当前选中的画质
                });
            });
        </script>
    HTML;
    }
}
?>

额外排查步骤 #

1. 更新插件版本：确保安装的videojs-hls-quality-selector支持Video.js 8，执行命令：

   npm install videojs-hls-quality-selector@latest
   

2. 检查控制台错误：打开浏览器开发者工具，查看是否有插件未加载、方法不存在等错误，针对性调整路径或配置
3. 插件兼容替代方案：如果插件仍无法适配，可通过Video.js原生API手动实现画质选择：

   player.ready(function() {
       // 添加自定义画质选择菜单
       var qualityMenu = player.controlBar.addChild('MenuButton', {
           label: '画质'
       }, 3);
   
       // 监听码流层级变化，更新菜单选项
       this.hls.on('levelsChanged', () => {
           const levels = player.hls.levels;
           const menuItems = levels.map((level, index) => ({
               label: `${level.height}p`,
               selected: index === player.hls.currentLevel,
               click: () => player.hls.currentLevel = index
           }));
   
           // 添加上"自动"选项
           menuItems.unshift({
               label: '自动',
               selected: player.hls.currentLevel === -1,
               click: () => player.hls.currentLevel = -1
           });
   
           qualityMenu.updateMenuItems(menuItems);
       });
   });
   

内容的提问来源于stack exchange，提问作者William Lee