Neologistic Paraphasic Mumbling

    react-videojs-wrapper

    1.1.2 • Public • Published

    react-videojs-wrapper

    React wrapper for VideoJS

    Install

    npm install --save react-videojs-wrapper
    

    Usage

    import React, { Component } from 'react';
    import VideoPlayer from 'react-videojs-wrapper';
     
    class VideoApp extends Component {
      player = {};
      state = {
        video: {
          src: 'http://www.example.com/path/to/video.mp4',
          poster: 'http://www.example.com/path/to/video_poster.jpg'
        }
      };
     
      onPlayerReady(player) {
        console.log('Player is ready: ', player);
        this.player = player;
      }
     
      onVideoPlay(duration) {
        console.log('Video played at: ', duration);
      }
     
      onVideoPause(duration) {
        console.log('Video paused at: ', duration);
      }
     
      onVideoTimeUpdate(duration) {
        console.log('Time updated: ', duration);
      }
     
      onVideoSeeking(duration) {
        console.log('Video seeking: ', duration);
      }
     
      onVideoSeeked(from, to) {
        console.log(`Video seeked from ${from} to ${to}`);
      }
     
      onVideoEnd() {
        console.log('Video ended');
      }
     
      render() {
        return (
          <div>
            <VideoPlayer
              controls={true}
              src={this.state.video.src}
              poster={this.state.video.poster}
              width='720'
              height='420'
              onReady={this.onPlayerReady.bind(this)}
              onPlay={this.onVideoPlay.bind(this)}
              onPause={this.onVideoPause.bind(this)}
              onTimeUpdate={this.onVideoTimeUpdate.bind(this)}
              onSeeking={this.onVideoSeeking.bind(this)}
              onSeeked={this.onVideoSeeked.bind(this)}
              onEnd={this.onVideoEnd.bind(this)}
            />
          </div>
        );
      }
    }
    export default VideoApp;

    Providing video sources

    Sources can be provided via the src function on the instance of a video.js player.

    Using player.src()

    player.src([
      {
        src: 'https://example.com/video_720.mp4',
        type: 'video/mp4',
        label: '720P'
      },
      {
        src: 'https://example.com/video_480.mp4',
        type: 'video/mp4',
        label: '480P',
        selected: true
      },
      {
        src: 'https://example.com/video_360.mp4',
        type: 'video/mp4',
        label: '360P'
      }
    ]);

    VideoJS APIs support:

    onReady will return videojs instance. Which means you can use all the APIs provided by VideoJS.
    List of VideoJS APIs

    VideoJS plugins support:

    Since most of the VideoJS plugins needs videojs instance to get initialized, it is very easy to integrate any of the available plugins by making use of videojs instance returnd by onReady event.
    List of VideoJS plugins

    Available Props:

    Prop Name Prop Type Default Value Description
    src string "" Video file path
    poster string "" Video poster file path
    width string | number auto Video player width
    height string | number auto Video player height
    controls boolean true Video player control bar toggle
    autoplay boolean false Video will start playing automatically if true
    preload string auto video tag preload attribute
    playbackRates array [0.5, 1, 1.5, 2] Video speed control
    hideControls array [] List of controls to hide. ['play','volume','seekbar','timer','playbackrates','fullscreen']
    bigPlayButton boolean true Big play button visibility toggle
    bigPlayButtonCentered boolean true Big play button center position toggle
    className string "" Video player wrapper class. It can be used for custom player skin.

    Video tracking props:

    Method Name Description
    onReady It will fire when video player is ready to be used. It returns videojs instance.
    onPlay It will fire when video starts playing anytime. It returns current time of the video
    onPause It will fire when video is paused. It returns current time of the video
    onTimeUpdate It keeps firing while video is in playing state. It returns current time of the video
    onSeeking It will fire when video is beeing seeked using seekbar. It returns current time of the video
    onSeeked It will fire after seeking is done. It returns seek start time and seek end time for the video.
    onEnd It will fire when video is finished playing.

    Install

    npm i react-videojs-wrapper

    DownloadsWeekly Downloads

    14

    Version

    1.1.2

    License

    MIT

    Unpacked Size

    885 kB

    Total Files

    11

    Last publish

    Collaborators

    • ptviet