1.0.20 • Published 6 years ago

eng-bsd-video-player

Licence

MIT

Version

1.0.20

Deps

Size

3.3 MB

Vulns

Weekly

Summary Dependency Versions

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)`

Keywords

react-component