react-video-player-extended v9.2.1
Introduction
React-video-player-extended supports both development and general user requirements. In addition to the basic video player functionality, react-video-player-extended provides the functionality for marking and selecting frames, jumping back and forth between frames based on the fps.
Install
npm install react-video-player-extended --save
# or
npm i react-video-player-extended
# or
yarn add react-video-player-extended
Example
import React, { Component } from 'react';
import VideoPlayer from 'react-video-player-extended';
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://media.w3.org/2010/05/bunny/trailer.mp4"
isPlaying={isPlaying}
volume={volume}
onPlay={this.handlePlay}
onPause={this.handlePause}
onVolume={this.handleVolume}
/>
}
}
Demo
https://amittkSharma.github.io/react-video-player-extended/example/index.html
Features
- Package supports basic video player functionality like play/pause, volume control and full screen
- Markers creation, display and selection
- Jumping back and forth between frames based on FPS (default fps value is 30)
- Display various settings associated with the video player such as title, fps, volume, repeat, start time
- Export markers as JSON file.
- Importing markers from JSON file.
Props
Prop | Description | Default |
---|---|---|
controls | Set visible controls. Available controls: ControlSelection | ControlSelection.Play, ControlSelection.Time, ControlSelection.Progress, ControlSelection.Volume, ControlSelection.FullScreen, ControlSelection.AddMarker, ControlSelection.ExportMarkers |
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 | |
fps | Frame per second | 30 |
selectedMarker | Selected marker | undefined |
viewSettings | Array of SettingSelection displaying various video player settings e.g. Title, FPS, Volume, Repeat, Start Time, Markers Count | undefined |
Callback Events
Prop | Description | Version |
---|---|---|
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, progressProps , ProgressProps is an object containing currentTime, duration and percentage, | |
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'} | |
onContinuousMarkerReceived | Callback sending markers continuously, but it will not mark the video timeline. Callback contains marker object. Example: {id: 1, time: 5, color: '#ffc837', title: 'Marker 1'} | |
onMarkerAdded | Callback when a new marker is being added, this API will return a new marker object with current time. | 8.0.0 |
onLoadedMetadata | Callback is triggered when the video player is loaded with new video, with all the meta-information | |
onVideoPlayingComplete | Callback triggered when the video is completely played contains progressProps object. Example: {"currentTime":52.209,"duration":52.209,"percentage":100} . Note: This event will not be triggered in case video is being played in loop. | 8.3.0 |
Donation
Let's sit together and contribute towards further enhancements Buy me a coffee :coffee:
1 year ago
1 year ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago