1

我在项目中使用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链接

4

0 回答 0