@epiclabs/epic-video-player

Video player wrapper to support different video sources with unified interface

Usage no npm install needed!

<script type="module">
  import epiclabsEpicVideoPlayer from 'https://cdn.skypack.dev/@epiclabs/epic-video-player';
</script>

README

Epic Video Player ยท Travis CI Status

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.

This project is not intended to be used in production since the result is a heavy library (over 800 KiB minified).

ToC

  1. Installation
  2. Using it as CommonJS module
  3. Using it as UMD module within <script> tag
  4. API
  5. Development
  6. Contribution

Installation

Install the dependency into your project

$ npm install @epiclabs/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>

API

Properties

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', ...

Development

$ git clone https://github.com/epiclabs-io/epic-video-player.git
$ cd epic-video-player
$ npm i
  1. For development:

    $ npm run start
    
  2. To build unminified version with source maps:

    $ npm run build-dev
    
  3. To build minified version:

    $ npm run build
    

Contribution

Everyone is welcome to collaborate to this project.

Just create a new branch from dev with a meaningful name and do a Pull Request to dev.

If the fix / feature is related to any open issue please provide a proper link.