A React video player library with YouTube-like UI
- ๐น HTML Video, M3U8 support
- ๐ Allow multiple qualities
- ๐ฑ Fully responsive
- ๐ฅ FullScreen cross browser support, even safari on iphone
- ๐ Subtitles support
- โฐ Speed control
- โจ๏ธ Keyboard shortcuts
- โ๏ธ Support server side rendering (nextjs)
- ๐ No extra dependencies
- โ Auto fallback to default video if render fails on old browsers
npm i react-tuby
# or
# yarn add react-tuby
import { Player } from "react-tuby";
import "react-tuby/css/main.css";
<Player
src={[
{
quality: "Full HD",
url:
"https://cdn.glitch.me/cbf2cfb4-aa52-4a1f-a73c-461eef3d38e8/1080.mp4",
},
{
quality: 720,
url: "https://cdn.glitch.me/cbf2cfb4-aa52-4a1f-a73c-461eef3d38e8/720.mp4",
},
{
quality: 480,
url: "https://cdn.glitch.me/cbf2cfb4-aa52-4a1f-a73c-461eef3d38e8/480.mp4",
},
]}
subtitles={[
{
lang: "en",
language: "English",
url:
"https://cdn.jsdelivr.net/gh/naptestdev/video-examples@master/en.vtt",
},
{
lang: "fr",
language: "French",
url:
"https://cdn.jsdelivr.net/gh/naptestdev/video-examples@master/fr.vtt",
},
]}
poster="https://cdn.jsdelivr.net/gh/naptestdev/video-examples@master/poster.png"
/>
prop | type | description |
---|---|---|
src | { quality: number | string; url: string; }[] | string; | One url of video or array of qualities |
subtitles | { lang: string; language: string; url: string; }[] | Array of subtitles, the first one will be default. Subtitle must be in .vtt format. |
dimensions | number | { width: number | string; height: number | string } | Number: aspect ratio (height/width). Default: 56.25% (9/16) Width, height: set custom width and height |
primaryColor | string | Customize the primary color. Default: #ff0000 |
poster | string | The url of poster image |
seekDuration | number | Seek duration when pressing left/right key. Default: 10 |
playerKey | string | Unique user key to store video state in localStorage |
<Player src="/your-video.mp4" />
<Player src="/your-video.mp4" dimensions={{ width: "100%", height: "100%" }} />
This library uses render props to allow user to set custom render component
<Player src="/your-video.mp4">
{(ref, props) => <video ref={ref} {...props} autoPlay loop />}
</Player>
<Player src="/your-video.mp4">
{(ref, { onPause, ...others }) => (
<video
ref={ref}
{...others}
onPause={e => {
// The library original event
onPause && onPause(e);
// Do something here
console.log("Paused");
}}
/>
)}
</Player>
Install react-hls-player
npm i react-hls-player --force
Usage
import ReactHlsPlayer from "react-hls-player";
<Player src="/your-video.m3u8">
{(ref, props) => <ReactHlsPlayer playerRef={ref} {...props} />}
</Player>;
If you have some bug or have any feature request, feel free to submit an issue on the github repo.