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.
This project is not intended to be used in production since the result is a heavy library (over 1 MB minified!).
ToC
- Installation
- Using it as CommonJS module
- Using it as UMD module within
<script>tag - API
- Development
- 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', () => {
const 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
-
htmlPlayer: HTMLVideoElement
Contains the HTMLVideoElement.
-
player: PlayerNative | PlayerDash | PlayerHls
Contains the internal instance of the video player.
-
playerType: 'DASH' | 'HLS' | 'NATIVE'
The type of player currently being used.
-
config: IPlayerConfig
Returns the configuration provided when the player was created, if any.
Methods
-
newPlayer(url: string, htmlPlayer: HtmlVideoElement, config?: IPlayerConfig): PlayerNative | PlayerDash | PlayerHls
Creates a new instance of epic-video-player.
-
load(): void
Triggers internally when newPlayer is called. If called manually, it will restart the current playback.
-
destroy(): void
Destroys the video player instance and related internal event listeners. Take into account that this doesn't remove the HTMLVideoElement element from the DOM.
-
pause(): void
Stops playback of the video.
-
play(): Promise
Begins playback of the video.
-
currentTime(secs?: number): void | 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(percentage?: number): void | 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): void | 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
-
For development:
$ npm run start -
To build unminified version with source maps:
$ npm run build-dev -
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 against dev.
If the fix / feature is related to any open issue please provide a proper link.
![dependabot[bot]](https://avatars.githubusercontent.com/u/49699333?size=120)
