React HLS Player: Integrating and Enhancing Video Streaming in Your React Applications

1npm install react-hls-player

1yarn add react-hls-player

1import React from 'react';
2import ReactDOM from 'react-dom';
3import ReactHlsPlayer from 'react-hls-player';
4
5ReactDOM.render(
6  <ReactHlsPlayer
7    src="https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8"
8    autoPlay={false}
9    controls={true}
10    width="100%"
11    height="auto"
12  />,
13  document.getElementById('app')
14);

1<ReactHlsPlayer
2  src="your-stream-url.m3u8"
3  autoPlay={true}
4  controls={true}
5  hlsConfig={{
6    maxLoadingDelay: 4,
7    minAutoBitrate: 0,
8    lowLatencyMode: true,
9  }}
10/>

1import React, { useRef } from 'react';
2import ReactHlsPlayer from 'react-hls-player';
3
4function VideoComponent() {
5  const playerRef = useRef(null);
6
7  const playVideo = () => playerRef.current.play();
8  const pauseVideo = () => playerRef.current.pause();
9
10  return (
11    <div>
12      <ReactHlsPlayer
13        playerRef={playerRef}
14        src="https://example.com/video.m3u8"
15        autoPlay={false}
16        controls={true}
17      />
18      <button onClick={playVideo}>Play</button>
19      <button onClick={pauseVideo}>Pause</button>
20    </div>
21  );
22}
23
24export default VideoComponent;

1<ReactHlsPlayer
2  src="https://example.com/video.m3u8"
3  onPlay={() => console.log("Video started")}
4  onPause={() => console.log("Video paused")}
5  onEnded={() => console.log("Playback finished")}
6  controls={true}
7/>