Выберите битрейты файла Dash вручную в react-player

Я использую в проекте 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

0 ответов

Другие вопросы по тегам