react-player:有没有一种方法可以通过自定义控件更改视频分辨率?

rryofs0p  于 2023-06-24  发布在  React
关注(0)|答案(3)|浏览(236)

我正在开发一个自定义视频播放器,它可以使用react-player从不同的来源(YouTube,Vimeo等)播放视频,它已经有了我设置的功能控件,如播放/暂停,音量/静音,进度条和全屏。
我试图添加一个齿轮按钮,有一个弹出窗口,显示不同的分辨率来设置视频,但我似乎找不到任何视频质量选择实现rect-player在线任何地方。
react-player是否可以实现这种功能,或者我应该选择一个不同的react视频播放器,比如video.js?

mi7gmzs6

mi7gmzs61#

似乎有一种使用getInternalPlayer('hls')onLoad事件的方法。在github issue中看到这个答案:
https://github.com/CookPete/react-player/issues/523#issuecomment-442652418

sqxo8psd

sqxo8psd2#

不,在react-player的文档中也没有,但如果你想更改分辨率,你可以使用Shaka Player它将有助于更改视频的分辨率。
使用播放器的NPM库:React Shaka Player
也可以查看demo:Shaka播放器演示
Shaka Player也支持几乎所有React Player中的功能。我们可以使用MP4,3gp和加密视频,如DASH和m3u8。

7d7tgy0s

7d7tgy0s3#

下面是使用HLS视频文件(m3u8)的组件示例

const player = useRef();

const onChangeBitrate = (event) => {
    const internalPlayer = player.current?.getInternalPlayer('hls');
    if (internalPlayer) {
        // currentLevel expect to receive an index of the levels array
        internalPlayer.currentLevel = event.target.value;
    }
}

return <div>
  <ReactPlayer ref={player} url={'https://....m3u8'} />

  Quality:
  <select onChange={onChangeBitrate}>
    {player.current?.getInternalPlayer('hls')?.levels.map(
      (level, id) => <option key={id} value={id}>
        {level.bitrate}
      </option>
    )}
  </select>
</div>;

相关问题