Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including create-videojs-player with all npm packages installed. Try it out:

var createVideojsPlayer = require("create-videojs-player")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

create-videojs-player v2.0.2

Easy way to load and manage multiple Videojs players with API

Create Videojs Player

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
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free