1.0.20 • Published 5 years ago
eng-bsd-video-player v1.0.20
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) |