Video.js视频质量切换功能在iPhone及Mac Safari浏览器异常求助

问题描述 #

我为Video.js播放器添加了视频质量切换功能，该功能在Chrome及Windows端浏览器可正常运行，但在iPhone和Mac Safari浏览器中仅显示切换按钮，无法展开质量选项。相关代码如下：

<video-js id="my-video" class="vjs-fluid" controls playsinline autoplay muted>
    <source src="https://3d26876b73d7.us-west-2.playback.live-video.net/api/video/v1/us-west-2.913157848533.channel.rkCBS9iD1eyd.m3u8" type="application/x-mpegURL">
</video-js>
<script src="node_modules/video.js/dist/video.min.js"></script>
<script src="node_modules/videojs-hls-quality-selector/dist/videojs-hls-quality-selector.js"></script>
<script type="text/javascript">
    function myDoubleClickHandler(event) {
        // `this` refers to the player in this context
        this.pause();
    }
</script>
<script type="text/javascript">
    var player = videojs('my-video', {
        autoplay: 'muted',
        techOrder: ['html5'], // Force non-native HLS playback
        enableSmoothSeeking: true,
        sources: [{
            src: 'https://3d26876b73d7.us-west-2.playback.live-video.net/api/video/v1/us-west-2.913157848533.channel.rkCBS9iD1eyd.m3u8',
        }],
        enableSmoothSeeking: true,
        liveui: true,

        userActions: {
            doubleClick: myDoubleClickHandler,
            hotkeys: function(event) {
                if (event.which === 32) {
                    if (this.paused()) {
                        this.play();
                    } else {
                        this.pause();
                    }
                }
            },
        },
    });
    player.hlsQualitySelector({
        displayCurrentQuality: false,
    });
</script>

截图显示仅能看到质量切换按钮，无法展开选项：

排查与解决方案 #

1. 强制禁用Safari原生HLS播放 #

Safari默认会用原生HLS播放器处理m3u8流，而videojs-hls-quality-selector依赖Video.js的HLS.js实现来获取质量层级数据。你当前的techOrder: ['html5']配置不足以强制禁用原生播放，需要补充配置：

• 首先引入videojs-contrib-hls插件（HLS.js的Video.js封装）：

<script src="node_modules/videojs-contrib-hls/dist/videojs-contrib-hls.min.js"></script>

• 修改播放器配置，强制使用HLS.js：

var player = videojs('my-video', {
  autoplay: 'muted',
  techOrder: ['html5'],
  html5: {
    hls: {
      overrideNative: true // 禁用Safari原生HLS播放器
    }
  },
  // 其他原有配置...
});

2. 调整脚本加载逻辑 #

原代码使用<script type="module">初始化播放器，但videojs-hls-quality-selector可能不是ES模块，导致初始化时机异常。将初始化代码移至普通<script>标签，确保所有依赖加载完成后再初始化插件（如上面修改后的代码所示）。

3. 检查Safari用户交互限制 #

Safari对媒体操作有严格的用户交互要求，若插件按钮的点击事件被浏览器拦截，可尝试：

• 将播放器初始化逻辑绑定到用户交互事件（比如页面点击）后执行
• 检查自定义userActions配置是否阻止了按钮的事件冒泡

4. 验证插件版本兼容性 #

确认videojs-hls-quality-selector与当前Video.js版本兼容，建议更新插件到最新版本，同时查看插件的官方issues，确认是否存在已知的Safari适配问题。

内容的提问来源于stack exchange，提问作者Ankur Nama