Skip to content
Javascript library which implements a video comparator component: two overlaped and synchronized video players each one playing an independent source.
Branch: master
Clone or download
Latest commit d93bc85 Mar 22, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
tests
.gitignore Getting project ready for GitHub release and npm publish Mar 1, 2019
.travis.yml
CHANGELOG.md
LICENSE
README.md Merge branch 'dev' Mar 4, 2019
index.html Fixing autoplay and mediaControls config Mar 4, 2019
jest.config.js Configuring jest and adding simple test Mar 1, 2019
package-lock.json
package.json Releasing v0.0.4 Mar 22, 2019
tsconfig.json
tslint.json
webpack.config.js

README.md

Epic Video Comparator · npm version Travis CI Status

LIVE DEMO

Javascript library which implements a video comparator component: two overlaped 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 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.

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
You can’t perform that action at this time.