Create Videojs Player

Create Videojs Player is a lightweight Javascript library to instanciate Videojs players, without any dependencies.

Installation

The libraryis available as the create-videojs-player package on npm.

npm install create-videojs-player --save

Demo

Online demo is available on the Create Videojs Player Github page.

How it works

HTML structure

The minimalist HTML structure below is enough to create the Videojs player.

Replace the {{urlVideo}} with the url of the video id.

<video class="video-js player">
    <source src="{{urlVideo}}" type="video/mp4">
</video>

Basic usage

Every page that contains a player, has to instanciates them. The following example create one item.

import VideojsPlayer from 'create-videojs-player'
const videojsPlayer = new VideojsPlayer();
videojsPlayer.create({
    element: document.querySelector('.player')
});

Options

You can pass configuration options to the constructor. Example below show all default values. Allowed values are as follows:

{
    multiplePlaying: true
}

• multiplePlaying - {Boolean} - Disable multiple player Videojs playing in the same time

Available methods

Each player instanciations returns the instance of the class with somes available methods to easily manipulate the element.

Create the player

The create() function create the Videojs player.

videojsPlayer.create({
    element: document.querySelector('.player')
});

Options

You can pass configuration options to the create() function.
Example below show all default values. Allowed values are as follows:

{
    element: null,
    playerVars: {
        'nativeControlsForTouch': false,
        'preload': 'auto',
        'volumeControl': false,
        'controls': true,
        'preload': 'auto'
    }
}

• element - {Object} - DOM element reference
• playerVars - {Object} - Parameters of the Videojs player

More informations about player parameters in the Videojs documentation.

Callback functions

There is a callback function available with the library.

Videojs player ready

The onPlayerReady function is called when the player is ready and instanciated.

videojsPlayer.create({
    element: document.querySelector('.player'),
    events: {
        onPlayerReady: (player) => {
            // Videojs player is ready
        }
    }
});

Parameters:

• player - {Object} - Videojs player instance