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
• 🖥 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 <video /> if rendering fails on older browsers

Installation

npm i @ducanh2912/react-tuby
# or
# yarn add @ducanh2912/react-tuby
# or
# pnpm add @ducanh2912/react-tuby

Import

import { Player } from "@ducanh2912/react-tuby";
import "@ducanh2912/react-tuby/css/main.css";

Example player

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

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

<Player src="/your-video.mp4" />

Custom width, height

<Player src="/your-video.mp4" dimensions={{ width: "100%", height: "100%" }} />

Custom props for video

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>

Custom event

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

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)

npm i react-hls-player
# or
# yarn add react-hls-player
# or
# pnpm add react-hls-player

Usage

import ReactHlsPlayer from "react-hls-player";

<Player src="/your-video.m3u8">
  {(ref, props) => <ReactHlsPlayer playerRef={ref} {...props} />}
</Player>;

Get video currentTime using custom ref

const ref = useRef(null);

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

<Player playerRef={ref} src="/your-video.mp4" />;

Disable keyboard shortcuts

<Player src="/your-video.mp4" keyboardShortcut={false} />

// or

<Player
  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 encounter some bugs or have a feature request, feel free to submit an issue on the github repo.