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.
For ABR sources, it is also possible to select the desired rendition to be played:
Install epic-video-comparator into your project
$ npm install @epiclabs/epic-video-comparator --save
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'));
<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>
$ git clone https://github.com/epiclabs-io/epic-video-comparator.git
$ cd epic-video-comparator
$ npm install
$ npm run build
-
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): IRenditionThis 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): IRenditionThis 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.
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. |
| 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 |