React Tuby

Build Size Version Downloads

A React video player library with YouTube-like UI

View Demo View Github

Feature

  • ? HTML Video, M3U8 support
  • ? Allow multiple qualities
  • ? Fully responsive
  • ? FullScreen cross browser support, event safari on iphone
  • ? Subtitles support
  • ⏰ Speed control
  • ⌨️ Keyboard shortcuts
  • ⚙️ Support server side rendering (nextjs)
  • ? No extra dependencies

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

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.mp4">
  {(ref, props) => <ReactHlsPlayer playerRef={ref} {...props} />}
</Player>;

Issues

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