React-video-markers NPM

Usage

npm install react-video-markers --save
# or
yarn add react-video-markers

import React, { Component } from 'react';
import VideoPlayer from 'react-video-markers';

class App extends Component {
  state = {
    isPlaying: false,
    volume: 0.7
  };
  
  handlePlay = () => {
    this.setState({isPlaying: true});
  };
  
  handlePause = () => {
    this.setState({isPlaying: false});
  };
  
  handleVolume = value => {
    this.setState({volume: value});
  };
  
  render () {
    const {isPlaying, volume} = this.state;

    return <VideoPlayer
      url="https://download.blender.org/durian/trailer/sintel_trailer-720p.mp4"
      isPlaying={isPlaying}
      volume={volume}
      onPlay={this.handlePlay}
      onPause={this.handlePause}
      onVolume={this.handleVolume}
     />
  }
}

Demo page: https://art-mironoff.github.io/react-video-markers/example/

Props

Prop	Description	Default
`controls`	Set visible controls. Available controls: `play`, `time`, `progress`, `volume`, `full-screen`	'play', 'time', 'progress', 'volume', 'full-screen'
`height`	Set the height of the player	'360px'
`width`	Set the width of the player	'640px'
`isPlaying`	Set to `true` or `false` to play or pause the media	false
`volume`	Set the volume of the player, between `0` and `1`	0.7
`loop`	Set to `true` or `false` to loop the media	false
`markers`	Set array of markers. Example: `[{id: 1, time: 5, color: '#ffc837', title: 'Marker 1'}]`	[]
`timeStart`	Set the second number to start playing video	0
`url`	The url of a video

Callback props

Prop	Description
onPlay	Called when video is started
onPause	Called when media is paused
onVolume	Called when volume is changed. Callback contains `volume`
onProgress	Callback contains `event`
onDuration	Callback contains `duration` of the media, in seconds
onMarkerClick	Called when marked is clicked. Callback contains marker object. Example: `{id: 1, time: 5, color: '#ffc837', title: 'Marker 1'}`