Package Exports

@epiclabs/epic-video-player

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@epiclabs/epic-video-player) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Epic Video Player ·

JS library to wrap different video libraries. Currently supporting native HTML video (WebM, Ogg Theora Vorbis, Ogg Opus, Ogg FLAC and MP4 H.264), MPEG-DASH(dash.js) and HLS (hls.js) streams.

Installation

Install the dependency into your project

$ npm install epic-video-player --save

Using it as CommonJS module

import { newPlayer } from '@epiclabs/epic-video-player';

...

let myPlayer = newPlayer('some-video-url', document.getElementById('html-video-id'));

myPlayer.pause();
myPlayer.currentTime(10);
myPlayer.play();

Using it as UMD module within `<script>` tag

<head>
    ...
    <script src="bundle/index.min.js"></script>
    ...
</head>
<body>
    ...
    <video id="my-video" style="width: 100%;" autoplay controls muted></video>
    ...
    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', () => {
            var myEvp = evp.newPlayer('https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd', document.getElementById('my-video'));
            myEvp.htmlPlayer.oncanplay = () => {
                myEvp.currentTime(14);
            };
        });
    </script>
    ...
</body>

Development

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

API

Properties

htmlPlayer: HTMLVideoElement

Contains the video HTML element.

Methods

newPlayer(url: string, htmlPlayer: HtmlVideoElement, config?: IPlayerConfig)

Creates a new instance of epic-video-player.
pause()

Stops playback of the video.
play()

Begins playback of the video.
currentTime(secs?: number)

It can receive a double indicating the number of seconds, in which case it will seek the video to the new time.

If not parameters are provided it will return the current playback time in seconds.
volume(perc?: number)

It can receive a double (from 0.0 to 1.0) indicating the level of the volume, in which case it will set the volume to the new level.

If not parameters are provided, it will return the current volume level.
playbackRate(rate?: number)

It can receive a double indicating the rate at which the video will be played back (1.0 by default).

For negative numbers the video will be played backwards.

If not parameters are provided it will return the current playback rate.
getStats()

Returns video stats as IStats.
getRenditions()

Returns the renditions of the video as an array of IRendition.
setRendition(rendition: IRendition | number, immediately: boolean)

Set the desired rendition. It will not drop the already buffered segments.

If rendition is -1, the rendition selection will be set to automatic.

If immediately is true, the buffer will be cleaned and the new rendition will be automatically rendered. In some cases (i.e. dashjs) it is not yet possible.
getCurrentRendition()

Returns the current rendition as a IRendition.

Object interfaces

Name	Properties
IStatsTimeRanges	start: number; end: number;
IStats	buffered: IStatsTimeRanges[]; duration: number; droppedFrames: number; loadTime: number; played: IStatsTimeRanges[]; seekable: IStatsTimeRanges[];
IRendition	audioCodec?: string; bitrate: number; height: number; level?: number; name?: string; videoCodec?: string; width: number;
IPlayerConfig	initialRenditionKbps?: number; initialRenditionIndex?: number; (*)type?: string;

Type examples: 'application/dash+xml', 'application/x-mpegURL', ...

@epiclabs/epic-video-player