BSD Video Player

This library allows you to include a 'Timeline Caption Supported' video player within your project. Simply import the BSDVideoPlayer component into your existing React app and pass through a video url, set of captions and control the Player using your own set of controls via the Player component's props.

Usage:

import React from "react";
import BSDVideoPlayer from "eng-bsd-video-player"

const MyComponent = ({name}) => (
 <BSDVideoPlayer
     videoSource="https://d2sgdtt0dqypl6.cloudfront.net/test-videos/brexit_baker_no_plotting_1127_12_9_105_10039491.mp4"
        dimensions={{
          height: 252,
          width: 448
        }}
        playing={false}
        seekTo={0}
        captionsTimeline={[]}
        controls={true}
        onPlaying={(time) => console.log(time)}
 />
);

export default MyComponent;

Props

| Prop name | Description | Required? | Example values | | ---------------- | ---------------------------------------------------------------- | --------- | ------------------------------------------------------------ | | videoSource | URL to the MP4 video file (currently restricted to MP4) | Yes | String: "https://localhost/video.mp4" | | dimensions | Object defining the width and height of the video player | Yes | Object: { width: 100, height: 100} | | playing | Manage the playback state of the player. Toggle to play/pause | Yes | Boolean: true | | seekTo | Trigger player to seek to this value (in seconds) | Yes | Number: 40 | | captionsTimeline | Timeline of captions to be played over the video (webcap format) | No | Array: [{"captionURL":"../../webcap/index.html","startTime":2,"duration":5,"captionData":{"line1":"les États-Unis L'opposant a indiqué ","caption":"title2Line","scriptType":"reith","legibilityBackground":"none","animateIn":true,"animateOut":true,"verticalPosition":"middle","displayFormat":"horizontal"}}] | | controls | Hide/show the default HTML5 Video controls | Yes | Boolean: true | | onPlaying | Handler for playing event | No | Function: (event) => console.log(event) | | onSeeked | Handler for seeked event | No | Function: (event) => console.log(event) | | onCaptionPlayerLoad | Handler for when caption player is loaded with captions | No | Function: (event) => console.log(event) |