react-tuby v0.1.24

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

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

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

Issues

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