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:

| key | type | description | |--|--|--| | source | string | Fill with the video url here. | | type | video/mp4, video/webm, video/ogg, video/quicktime | Set the video format. | | resolution | 360, 480, 576, 720, 1080, 1440, 2160 | Set the video resolution. | | default | boolean | Set the video with what resolution to display by default. |

subtitles

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

| key | type | description | |--|--|--| | label | string | Fill with the caption language | | lang | string | Fill with the caption language id | | source | string | Fill with the caption url here. | | default | boolean | Set the default caption. |

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:

| key | type | description | |--|--|--| | source | string | Fill with the image url here. | | time | string | Fill the time when the thumbnail shows, with a format m:ss. |

License

MIT © Yudha Pratama Wicaksana