/react-tuby

A React video player library with YouTube-like UI

Primary LanguageTypeScriptMIT LicenseMIT

React Tuby

Build Size Version Downloads

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

npm i react-tuby
# or
# yarn add react-tuby

Import

import { Player } from "react-tuby";
import "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 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<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

Examples

Single src

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

Full 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

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

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