桌面端Safari中VideoJS设置overrideNative后仍无法选择HLS画质

问题根因 #

你当前的配置本身符合VideoJS规范，在NextJS中不生效是NextJS服务端渲染特性、VideoJS依赖加载顺序、参数遗漏三个问题共同导致的。

可直接落地的解决步骤 #

1. 修正依赖导入规则
   VideoJS及相关插件不支持服务端渲染，必须在客户端侧动态导入，关闭SSR：

// 组件导入处使用next/dynamic
import dynamic from 'next/dynamic'
// 组件挂载后再异步导入依赖并注册插件
useEffect(() => {
  if (typeof window === 'undefined') return
  const initPlayer = async () => {
    const videojs = (await import('video.js')).default
    const qualityLevels = (await import('videojs-contrib-quality-levels')).default
    videojs.registerPlugin('qualityLevels', qualityLevels)
    // 此处执行播放器初始化逻辑
  }
  initPlayer()
}, [])

2. 补全播放器配置参数
   新版VideoJS的HLS逻辑已整合到内置的@videojs/http-streaming（VHS）引擎中，需要额外补充preferNative: false参数强制禁用原生HLS，完整配置如下：

const videoJsOptions = {
    autoplay: false,
    preload: "auto",
    controls: true,
    poster: thumbnailURL,
    sources: [
        {
            src: liveURL,
            type: "application/x-mpegURL",
            withCredentials: false,
        },
    ],
    html5: {
        nativeAudioTracks: false,
        nativeVideoTracks: false,
        nativeTextTracks: false,
        vhs: {
            overrideNative: true
        },
        hls: {
            overrideNative: true,
            // 强制优先使用VHS引擎，禁用Safari原生HLS
            preferNative: false
        }
    },
};

3. 调整画质列表读取时机
   不要在播放器初始化完成后立刻读取qualityLevels()，要等HLS清单解析完成再读取：

player.ready(() => {
  player.one('loadedmetadata', () => {
    // 此处读取qualityLevels()即可得到完整画质列表
    console.log(player.qualityLevels())
  })
})

内容的提问来源于stack exchange，提问作者Sean Saoirse