Video-player-cipherschools NPM

Video Player CipherSchools

A player with all required plugins with video.js

Maintenance Status: Stable

Installation
Basic Usage
License

Installation

Install video-player-cipherschools via npm (preferred):

$ npm install video-player-cipherschools

Basic Usage

import { VideoScreen, Videoattributes } from "video-player-cipherschools";

var videoList = [
    {
      sources: [
        {
          src:
            "https://multiplatform-f.akamaihd.net/i/multi/will/bunny/big_buck_bunny_,640x360_400,640x360_700,640x360_1000,950x540_1500,.f4v.csmil/master.m3u8",
          type: "application/x-mpegURL",
        },
      ],
      poster: "http://media.w3.org/2010/05/bunny/poster.png",
    }
]

<VideoScreen
    autoplay = false,   //default
    playbackRates = [2, 1.75, 1.5, 1.25, 1, 0.75, 0.5, 0.25],  //default
    responsive = false,  //default
    fluid = false,  //default
    controls = true,    //default
    aspectRatio = "16:9",   //default
    videoList={videoList}   //required
    className="vjs-matrix"  //required if you want some changes default is 'vjs-matrix'
    hotKeys = {
        default: true,   //default
        seekStep: 30    //skip on right and left arrow key 30 sec is default
    },
    watermark = {
        default: false, //default
        image: {url}    //[required]
        fadeTime: 3,    //time to fade in second [default is 3 second]
        position: "top-right",  //"top-left", "bottom-left", "bottom-right", "top-right(default)"
        url: {url}, //on click navigation
    }
    qualitySelector = {
        default: true,  //default
        qualityText: undefined,     //if you want text instead of icon so true it
        icon: "string" //vjs-string
    }
/>

It also returns a function which have all the player property

const Player = VideoAttributes();

returns object which currently have getCurrentPlayer() which returns video.js] player

from where you can use do any operation on video

e.g

const enter = () => {
  const Player = VideoAttributes();
  const player = Player.getCurrentPlayer();
  player.requestPictureInPicture();
};

const exit = () => {
  const Player = VideoAttributes();
  const player = Player.getCurrentPlayer();
  player.exitPictureInPicture();
};

These function cput video in PIP mode and exit from PIP mode.

Some styling in css

.vjs-matrix .vjs-big-play-button {
  border-color: #2c3d4f;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

this changes the play button. you can grab css from inspect element.