'react-player: Is there a way to change video resolution with custom controls?
I am working on a custom video player that streams videos from different sources (YouTube, Vimeo, etc.) using react-player, and it already has functioning controls that I set up like play/pause, volume/mute, progress bar, and full screen.
I am trying to add a gear button that has a popover which displays different resolutions to set the video to, but I cannot seem to find any video quality selection implementation for react-player anywhere online.
Is this kind of functionality possible with react-player at all, or should I choose a different react video player like video.js?
Solution 1:[1]
No, Not in the documentation also of react-player but if you want to change the resolution you can use the Shaka Player it will help to change the resolution of the video.
Use the NPM library for Player : React Shaka Player
Can also check the demo : Shaka Player Demo
Shaka Player also supports almost all functionality like in React player. We can able to use MP4, 3gp, and encrypted videos like DASH and m3u8.
Solution 2:[2]
Here is a component sample using an HLS video file (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>;
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | Sonu P. |
Solution 2 | pyrou |