Warning
create-videojs-player
is deprecated and has been merged into thevLitejs
project. See vLitejs for its successor 🎉
Create Videojs Player is a lightweight Javascript library to instanciate Videojs players, without any dependencies.
The libraryis available as the create-videojs-player
package on npm.
npm install create-videojs-player --save
Online demo is available on the Create Videojs Player Github page.
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>
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')
});
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
Each player instanciations returns the instance of the class with somes available methods to easily manipulate the element.
The create()
function create the Videojs player.
videojsPlayer.create({
element: document.querySelector('.player')
});
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 referenceplayerVars
- {Object} - Parameters of the Videojs player
More informations about player parameters in the Videojs documentation.
There is a callback function available with the library.
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