Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

@epiclabs/epic-video-comparator

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@epiclabs/epic-video-comparator

JS library to create a video comparator, i.e., two overlaped and syncrhonized video players each one with an independent source.

0.0.7
latest
Source
npm

Version published: 6 years ago

Maintainers: 5

Created: 6 years ago

Source

Epic Video Comparator ·

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

Keywords

FAQs

What is @epiclabs/epic-video-comparator?

Is @epiclabs/epic-video-comparator well maintained?

Package last updated on 11 Apr 2019

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install