Nucleic Phosphate Modifier

    @docomodigital/videoplayer
    TypeScript icon, indicating that this package has built-in type declarations

    3.3.3 • Public • Published

    VideoPlayer

    Build Status Coverage Status npm version Greenkeeper badge

    VideoPlayer is a Manager for all the videos displayed in a web page.

    It can manage multiple video instances with multiple video Provider:

    Supported providers:

    • Vimeo
    • Dailymotion
    • Youtube
    • Flowplayer (internal player, just pass a video source url)
    • Iframe

    Install

    With NPM:

    npm install --save @docomodigital/videoplayer

    or with Yarn:

    yarn add @docomodigital/videoplayer

    Usage

    import VideoPlayer from '@docomodigital/videoplayer';
    
    // VideoPlayer is already an instance, no need to create a new one
    
    const player = VideoPlayer.createPlayer({
        domNode: document.getElementById('video'),
        provider: 'dailymotion', // | 'vimeo' | 'youtube' | 'flowplayer' | 'iframe'
        videoId: 'uxWvd',
        providerOptions: {
            // See each provider init options
        },
    });
    
    // Play the video (Note: some (mobile) browsers does not allow the play before a user interaction)
    player.play();
    // Pause the video
    player.pause();
    
    // Every player instance has an unique id, you can use it to send command from the VideoPlayer class
    const id = player.id; // video_uxWvd_1
    // Stop the video with the given id
    VideoPlayer.stop(id); // player.stop()
    // Clear (remove) the video with the given id
    VideoPlayer.clear(id) // player.clear()
    Add an event listener
    const callback = (evt) => {
        // Do stuff...
    }
    VideoPlayer.addEventListener(id, 'play', callback);
    Remove an event listener
    VideoPlayer.removeEventListener(id, 'play', callback);

    See the Documentation for a list of all available commands

    Create a new Player passing the DOM id instead of the DOM Node
    VideoPlayer.createPlayer({
        domNode: '#video', // Accepts also the DOM node (document.getElementByID('video'))
        provider: 'dailymotion',
        videoId: 'uxWvd',
        //...
    });

    Register event listeners when creating the Player

    const playCallback = (evt) => {
        //
    }
    
    const pauseCallback = (evt) => {
        //
    }
    
    VideoPlayer.createPlayer({
        domNode: document.getElementById('video'),
        provider: 'dailymotion',
        videoId: 'uxWvd',
        events: {
            play: playCallback,
            pause: pauseCallback,
        },
    });

    The Player instance is exposed and directly accessible, you can bypass at all the VideoPlayer interface

    import { Player } from './src'
    const player = new Player({
        domNode: document.getElementById('video'),
        provider: 'dailymotion',
        videoId: 'uxWvd',
        // ... Same options as VideoPlayer.createPlayer except for "events" (not supported here), you need to register events manually calling player.on(..)
    });
    // You can still have multiple Player instances, but they are not aware of each other
    const player2 = new Player({
        domNode: document.getElementById('video2'),
        provider: 'vimeo',
        videoId: 'da45hds',
    });

    Documentation

    To read the documentation, go to:

    https://docomodigital.github.io/videoplayer/latest

    Keywords

    none

    Install

    npm i @docomodigital/videoplayer

    DownloadsWeekly Downloads

    15

    Version

    3.3.3

    License

    MIT

    Unpacked Size

    1.02 MB

    Total Files

    69

    Last publish

    Collaborators

    • everdrone
    • blame_etc