React Video Player (Extended)

React Video Player (with Markers, Next, Last Frame jumps)

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

Callback Events

Donation

Let's sit together and contribute towards further enhancements Buy me a coffee :coffee: