在 react-player 中手动选择 Dash 文件比特率

问题描述

我在项目中使用 React-player，我的任务是使用分辨率切换器功能流式传输 MPD (DASH) 文件。

首先基于 DASHjs 文档，我使用 getBitrateInfoListFor("video") 获取所有可用比特率，然后通过以下代码禁用自动比特率切换器：

ref.current.player
      .getInternalPlayer("dash")
      .updateSettings({
        streaming: { abr: 
        { autoSwitchBitrate: 
          { video: false } 
        } }
      });

最后一步，我用 setQualityFor 设置了新的质量：

ref.current.player.getInternalPlayer("dash").setQualityFor("video",qualityIndex);

但它不起作用！

整个代码：

let ref = React.createRef();
  const [VidQuality,setVidQuality] = React.useState(null);

  const getDashData= dash => {
    console.log(dash);
    setVidQuality(dash);
  };
  const updateQuality = e => {
    VidQuality?.getBitrateInfoListFor("video")?.forEach(
      quality => {
        if (quality.height === +e.target.innerHTML) {
          ref.current.player.getInternalPlayer("dash").updateSettings({
            streaming: { abr: { autoSwitchBitrate: { video: false } } }
          });
          ref.current.player
            .getInternalPlayer("dash")
            .setQualityFor("video",quality.qualityIndex);
        }
      }
    );
  };
  return (
    <div>
      <ReactPlayer
        ref={ref}
        url="VIDEO_URL.mpd"
        controls
        width="100%"
        height="100%"
        onReady={() => {
          getDashData(ref?.current?.player?.player?.dash);
        }}
      />
      <div>
        <h2>video qualities</h2>
        {VidQuality?.getBitrateInfoListFor("video")?.map(qualities => (
          <button classes="primary radius" onClick={updateQuality}>
            {qualities.height}
          </button>
        ))}
      </div>
    </div>
  );

这里是stackblitz link

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）