时间戳

首页 > 解决方案 > VideoJS 没有质量级别/尽管在 Safari 桌面中具有 overrideNative，但无法选择质量

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

问题描述

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

TLDR；如何覆盖 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 引擎。

标签： reactjssafarinext.jshttp-live-streamingvideo.js

解决方案

这里至少发生了两件事。

首先，该选项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 });
}

推荐阅读