Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/epiclabs-io/epic-video-comparator
Javascript library which implements a video comparator component: two overlaped and synchronized video players each one playing an independent source.
https://github.com/epiclabs-io/epic-video-comparator
Last synced: 2 months ago
JSON representation
Javascript library which implements a video comparator component: two overlaped and synchronized video players each one playing an independent source.
- Host: GitHub
- URL: https://github.com/epiclabs-io/epic-video-comparator
- Owner: epiclabs-io
- License: mit
- Created: 2019-02-04T10:21:12.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2019-11-03T19:49:00.000Z (about 5 years ago)
- Last Synced: 2024-10-31T19:49:31.081Z (2 months ago)
- Language: TypeScript
- Homepage: https://epiclabs-io.github.io/epic-video-comparator-demo/
- Size: 773 KB
- Stars: 83
- Watchers: 11
- Forks: 8
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-video - epic-video-comparator - Javascript library which implements a video comparator component: two overlaped and synchronized video players each one playing an independent source. (Players)
README
# Epic Video Comparator · [](https://www.npmjs.com/package/@epiclabs/epic-video-comparator) [](https://travis-ci.org/epiclabs-io/epic-video-comparator)
[LIVE DEMO](https://epiclabs-io.github.io/epic-video-comparator-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](https://www.npmjs.com/package/@epiclabs/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](https://github.com/Dash-Industry-Forum/dash.js)) and HLS ([hls.js](https://github.com/video-dev/hls.js)) streams.
For ABR sources, it is also possible to select the desired rendition to be played:
# 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 `````` tag
```
<head>
...
<script src="bundle/index.min.js">
...
...
...
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'));
});
...
```
# 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 |