# React Tuby
[](https://bundlephobia.com/result?p=@ducanh2912/react-tuby)
[](https://www.npmjs.com/package/@ducanh2912/react-tuby)
A React video player library with YouTube-like UI
## Demo
[https://react-tuby.vercel.app](https://react-tuby.vercel.app)
## Feature
- 📹 HTML Video, M3U8 support
- 🎛 Allow multiple qualities
- 📱 Fully responsive
- 🖥 Full screen cross browser support, even Safari on iPhone
- 📖 Subtitles support
- ⏰ Speed control
- ⌨️ Keyboard shortcuts
- ⚙️ Support server side rendering (Next.js)
- 🛠 No extra dependencies
- ✅ Automatically fallback to default `` if rendering fails on older browsers
## Installation
```bash
npm i @ducanh2912/react-tuby
# or
# yarn add @ducanh2912/react-tuby
# or
# pnpm add @ducanh2912/react-tuby
```
## Import
```jsx
import { Player } from "@ducanh2912/react-tuby";
import "@ducanh2912/react-tuby/css/main.css";
```
## Example player
```jsx
```
## Props
| prop | type | description |
| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------- |
| **src** | { quality: number \| string; url: string; }[] \| string; | One video url or array of video urls and qualities |
| **subtitles** | { lang: string; language: string; url: string; }[] | Array of subtitles, the first one will be the default. Subtitle **must** be in .vtt format. |
| **dimensions** | number \| { width: number \| string; height: number \| string } | Number: aspect ratio (height/width). Default is 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 |
| **preserve** | { watchTime?: boolean; volume?: boolean; playbackSpeed?: boolean; } | Choose which values to preserve in localStorage |
## Examples
### One src only
```jsx
```
### Custom width, height
```jsx
```
### Custom props for video
This library uses **render props** to allow user to set custom render component
```jsx
{(ref, props) => }
```
### Custom event
```jsx
{(ref, { onPause, ...others }) => (
```
### Usage with m3u8 / HLS
Install react-hls-player (I'd recommend my fork @ducanh2912/react-hls-player though, since that package isn't maintained anymore)
```bash
npm i react-hls-player
# or
# yarn add react-hls-player
# or
# pnpm add react-hls-player
```
Usage
```jsx
import ReactHlsPlayer from "react-hls-player";
{(ref, props) => }
;
```
### Get video currentTime using custom ref
```jsx
const ref = useRef(null);
useEffect(() => {
ref.current?.addEventListener("timeupdate", () => {
console.log(ref.current?.currentTime);
});
}, []);
;
```
### Disable keyboard shortcuts
```jsx
// or
```
## 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 encounter some bugs or have a feature request, feel free to submit an issue on the [github repo](https://github.com/DuCanhGH/react-tuby.git).