Negatory. Postpone Mission.

    @epiclabs/epic-video-comparator
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.7 • Public • Published

    Epic Video Comparator · npm version Travis CI Status

    LIVE DEMO

    JavaScript library which implements a video comparator component: two overlapped and synchronized video players each one playing an independent source. It is based on epic-video-player library, which currently supports native HTML video (WebM, Ogg Theora Vorbis, Ogg Opus, Ogg FLAC and MP4 H.264), MPEG-DASH(dash.js) and HLS (hls.js) streams.

    video-comparator-overview

    For ABR sources, it is also possible to select the desired rendition to be played:

    video-comparator-quality-selector

    Installation

    Install epic-video-comparator into your project

    $ npm install @epiclabs/epic-video-comparator --save
    

    Using it as CommonJS module

    import { Comparator } from '@epiclabs/epic-video-comparator';
    ...
    const comparatorConfig = {
        leftUrl: 'https://demo.unified-streaming.com/video/tears-of-steel/tears-of-steel.ism/.mpd',
        rightUrl: 'https://demo.unified-streaming.com/video/tears-of-steel/tears-of-steel.ism/.mpd',
        mediaControls: true,
        loop: true,
    };
    const myComp = new Comparator(comparatorConfig, document.getElementById('comparator-container'));
    
    

    Using it as UMD module within <script> tag

    <head>
        ...
        <script src="bundle/index.min.js"></script>
        ...
    </head>
    <body>
        ...
        <div id="comparator-container"></div>
        ...
        <script type="text/javascript">
            document.addEventListener('DOMContentLoaded', function () {
                var comparatorConfig = {
                    leftUrl: 'https://demo.unified-streaming.com/video/tears-of-steel/tears-of-steel.ism/.mpd',
                    rightUrl: 'https://demo.unified-streaming.com/video/tears-of-steel/tears-of-steel.ism/.mpd',
                    mediaControls: true,
                    loop: true,
                };
                window.myComp = new evc.Comparator(comparatorConfig, document.getElementById('comparator-container'));
            });
        </script>
        ...
    </body>
    

    Development

    $ git clone https://github.com/epiclabs-io/epic-video-comparator.git
    $ cd epic-video-comparator
    $ npm install
    $ npm run build
    

    API

    Methods

    • new Comparator(config: IComparatorConfig, container: HTMLDivElement)

      Creates a new instance of epic-video-comparator.

    • pause()

      Stops playback of both videos.

    • play()

      Starts playback of both videos.

    • togglePlayPause()

      Switches playing/pause status.

    • seek(time: number)

      Sets both players' playback to the same time position.

    • reload()

      Destroys and reload the epic-video-comparator.

    • toggleFullScreen()

      Enters / exits fullscreen mode.

    • setRenditionByKbps(player: 'left' | 'right', kbps: number): IRendition

      Sets a desired rendition given as Kbps on one of the players.

    • setRenditionKbps(player: 'left' | 'right', kbps: number): IRendition

      This method has been deprecated since version 0.0.2. Use setRenditionByKbps instead.

    • setRenditionByIndex(player: 'left' | 'right', index: number): IRendition

      Sets a desired rendition given as index number on one of the players. The order will be the order of the array returned by getRenditions method.

    • setRenditionIndex(player: 'left' | 'right', index: number): IRendition

      This method has been deprecated since version 0.0.2. Use setRenditionByIndex instead.

    • getRenditions(player: 'left' | 'right'): IRendition[]

      Retrieves the list of available renditions of one of the players.

    • togggleStats(): void

      Shows / Hides the stats boxes.

    • updateStats(innerLeft: string, innerRight: string): void

      Sets the given content to each one of the players' stats box. It will overwrite any stat given by this library as default. It is recommended to be used within a setInterval.

    • destroy(): void

      Removes all DOM elements and binding listeners.

    Events

    The events are binded to the comparator container. Usage example:

    var container = document.getElementById('comparator-container');
    container.addEventListener('created', () => console.log('created!'));
    
    Event Description
    created Fires when the comparator is created (it occurs during comparator creation or reload but also when a new rendition is selected on any side).
    fullscreen_toggle Fires when the comparator toggles its fullscreen mode.

    Object interfaces

    Name Properties Default value
    IComparatorConfig autoplay?: boolean;
    leftUrl: string;
    loop?: boolean;
    rightUrl: string;
    mediaControls?: boolean;
    stats?: IStatsConfig / boolean
    true
    -
    true
    -
    true
    IStatsConfig defaults
    IStatsConfig showDuration?: boolean;
    showBitrate?: boolean;
    showResolution?: boolean;
    showVideoCodec?: boolean;
    showAudioCodec?: boolean;
    showDroppedFrames?: boolean;
    showBuffered?: boolean;
    showStartupTime?: boolean;
    custom?: boolean;
    true
    true
    true
    true
    true
    true
    true
    true
    false

    Install

    npm i @epiclabs/epic-video-comparator

    DownloadsWeekly Downloads

    14

    Version

    0.0.7

    License

    MIT

    Unpacked Size

    3.07 MB

    Total Files

    18

    Last publish

    Collaborators

    • adripanico
    • jeoliva
    • jpeletier
    • kortatu
    • siroepic