尽管在 Safari 桌面中 overrideNative，VideoJS 没有质量级别/无法选择质量

Question

我正在构建一个播放 HLS 视频的 NextJS 网站。

---

太长了；如何覆盖 Safari 的原生 HLS 引擎？需要哪些玩家选项？我的（下）不起作用！

---

要在质量之间切换，我使用：https ://github.com/videojs/videojs-contrib-quality-levels

在其他浏览器（非 Safari）中，质量选择器工作正常，因为它player.qualityLevels()包含所需的质量。

但是，在 Safari（桌面版）中，数组 ( qualityLevels()) 为空，因此我无法在质量之间切换。

playerOption我这里有这个：

const videoJsOptions = {
    autoplay: false,
    preload: "auto",
    controls: true,
    poster: thumbnailURL,
    sources: [
        {
            src: liveURL,
            type: "application/x-mpegURL",
            withCredentials: false,
        },
    ],
    html5: {
        nativeAudioTracks: false,
        nativeVideoTracks: false,
        hls: {
            overrideNative: true,
        },
    },
};

这对于这个人的项目来说效果很好（虽然没有反应）：https ://jsfiddle.net/geukvmhn/

在 Safari 中查看；显示出品质，但对我来说根本不起作用。基本上，我正在努力覆盖 Safari（桌面）中的本机 HLS 引擎。

Answer 1

这里至少发生了两件事。

首先，该选项hls: { overrideNative: true }不起作用。它已被弃用，但应该有效，但更改为当前版本vhs: { overrideNative: true }确实有效。

其次，在其他浏览器上，质量菜单有时不包含任何质量。有时，在钩子中初始化它useEffect可能是在错误的时间发生的。我会将插件初始化和源加载移动到播放器就绪回调中，以控制顺序。

function onPlayerReady() {
  this.qualityLevels();
  this.src({
    src: liveURL,
    type: "application/x-mpegURL",
    withCredentials: false
  });
  this.hlsQualitySelector({ displayCurrentQuality: true });
}