Nerds Publishing Monstrosities

    @csod-oss/react-video-js-player

    1.1.3 • Public • Published

    @csod-oss/react-video-js-player

    React wrapper for VideoJS. Live Demo

    Install

    npm install --save @csod-oss/react-video-js-player
    

    Usage

    import React, { Component } from 'react';
    import VideoPlayer from '@csod-oss/react-video-js-player';
    
    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;

    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
    autoplay boolean false Video will start playing automatically if true
    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.
    controls boolean true Video player control bar toggle
    height string | number auto Video player height
    hideControls array [] List of controls to hide. ['play','volume','seekbar','timer','playbackrates','fullscreen']
    playbackRates array [0.5, 1, 1.5, 2] Video speed control
    preload string auto video tag preload attribute
    poster string "" Video poster file path
    src string "" Video file path
    width string | number auto Video player width
    withCredentials boolean true When the withCredentials property is set to true, all XHR requests for manifests and segments would have withCredentials set to true as well. This enables storing and passing cookies from the server that the manifests and segments live on. This has some implications on CORS because when set, the Access-Control-Allow-Origin header cannot be set to *, also, the response headers require the addition of Access-Control-Allow-Credentials header which is set to true. See html5rocks's article for more info.

    Video tracking props:

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

    Install

    npm i @csod-oss/react-video-js-player

    DownloadsWeekly Downloads

    0

    Version

    1.1.3

    License

    ISC

    Unpacked Size

    1.26 MB

    Total Files

    10

    Last publish

    Collaborators

    • chengsieuly
    • csod_justinjrussell