Near Perfect Mood

    create-videojs-player

    2.0.2 • Public • Published

    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

    Install

    npm i create-videojs-player

    DownloadsWeekly Downloads

    7

    Version

    2.0.2

    License

    MIT

    Unpacked Size

    12 kB

    Total Files

    7

    Last publish

    Collaborators

    • yoriiis