video

React Video player with markers

Aug 26, 2019
React Video player with markers

React Video Markers

React Video player with markers.

View Demo View Github

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} /> } }

Props

PropDescriptionDefault
controlsSet visible controls. Available controls: play, time, progress, volume, full-screen['play', 'time', 'progress', 'volume', 'full-screen']
heightSet the height of the player'360px'
widthSet the width of the player'640px'
isPlayingSet to true or false to play or pause the mediafalse
volumeSet the volume of the player, between 0 and 10.7
loopSet to true or false to loop the mediafalse
markersSet array of markers. Example: [{id: 1, time: 5, color: '#ffc837', title: 'Marker 1'}][]
timeStartSet the second number to start playing video0
urlThe url of a video

Callback props

PropDescription
onPlayCalled when video is started
onPauseCalled when media is paused
onVolumeCalled when volume is changed. Callback contains volume
onProgressCallback contains event
onDurationCallback contains duration of the media, in seconds
onMarkerClickCalled when marked is clicked. Callback contains marker object. Example: {id: 1, time: 5, color: '#ffc837', title: 'Marker 1'}

GitHub

Recommended