kaldiras v0.1.3

Kaldiras

Kaldiras is a video player for ReactJS. Simple, accessible, and easy to customize.

Features

• Accessible, full support for VTT captions
• Customizable, change the color theming easily
• Fullscreen, supports native fullscreen
• Shortcut, supports keyboard shortcuts
• Playsinline, supports the playsinline attribute
• Playback Speed, adjust playback speed
• Multiple captions, support for multiple caption tracks
• Preview thumbnails, support for displaying preview thumbnails

How to install

npm install kaldiras

or

yarn add kaldiras

How to use

For now, Kaldiras supported video types like mp4, webm, mov, and ogg. You must set the video type on the source property and the quality size of the video.

The other property like subtitles and previews is optional. Just the source property is required.

import "kaldiras/kaldiras.css";
import { Video } from "kaldiras";

const App = () => {
  return(
    <Video
    sources={[
      {
        source: "https://.../480p.mp4",
        type: "video/mp4",
        resolution: "1080"
      }
    ]}
    subtitles={[
      {
        label: "English",
        lang: "en",
        source: "https://.../en.vtt",
        default: true
      }
    ]}
    previews={[
      {
        source: "https://.../5s.png",
        time: "0:05"
      }
    ]} />
  )
}

sources

Here will be explained the structure that exists in the sources property:

subtitles

Here will be explained the structure that exists in the subtitles property:

previews

This property is used to display a thumbnail preview when highlighting the progress bar. Here will be explained the structure that exists in the previews property:

License

MIT © Yudha Pratama Wicaksana