React Tuby


A React video player library with YouTube-like UI

Demo

https://react-tuby.vercel.app

Feature

- 📹 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

Installation

``bash
npm i react-tuby


or

yarn add react-tuby

`

Import

`jsx
import { Player } from "react-tuby";
import "react-tuby/css/main.css";
`

Example player

`jsx
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"
/>
`

Props

| 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 |
| internationalization | string | See internationalization section below |
| playerRef | RefObject\ | Use your own ref to control the video player |
| pictureInPicture | boolean | Show picture in picture button |
| keyboardShortcut | boolean \| { pause?: boolean; rewind?: boolean; forward?: boolean; fullScreen?: boolean; mute?: boolean; subtitle?: boolean; } | Customize keyboard shortcuts |

Examples

$3

`jsx

`

$3

`jsx

`

$3

This library uses render props to allow user to set custom render component

`jsx

{(ref, props) =>
`

$3

`jsx

{(ref, { onPause, ...others }) => (
ref={ref}
{...others}
onPause={e => {
// The library original event
onPause && onPause(e);

// Do something here
console.log("Paused");
}}
/>
)}

`

$3

Install react-hls-player

`
npm i react-hls-player --force
`

Usage

`jsx
import ReactHlsPlayer from "react-hls-player";


{(ref, props) => }
;
`

$3

`jsx
const ref = useRef(null);

useEffect(() => {
ref.current?.addEventListener("timeupdate", () => {
console.log(ref.current?.currentTime);
});
}, []);

;
`

$3

`jsx


// or

src="/your-video.mp4"
keyboardShortcut={{
pause: false,
forward: true,
rewind: true,
fullScreen: true,
mute: true,
subtitle: true,
}}
/>
``

Internationalization

| property | default |
| --------------------------- | -------------------- |
| tooltipsPlay | Play (k) |
| tooltipsPause | Pause (k) |
| tooltipsMute | Mute (m) |
| tooltipsUnmute | Unmute (m) |
| tooltipsSubtitles | Subtitles (c) |
| tooltipsSettings | Settings |
| tooltipsFullscreen | Full Screen (f) |
| tooltipsExitFullscreen | Exit full screen (f) |
| settingsPlaybackSpeed | Playback Speed |
| settingsPlaybackSpeedNormal | Normal |
| settingsSubtitles | Subtitles |
| settingsSubtitlesOff | Off |
| settingsQuality | Quality |
| settingsModalOff | OK |

Issues

If you have some bug or have any feature request, feel free to submit an issue on the github repo.