-
Install the dependency into your Angular 2+ project
$ npm install ngx-epic-video-player
-
Import the NgxEpicVideoPlayerModule
in the module in which you will use it (e.g., app.module.ts
):
import { NgxEpicVideoPlayerModule } from 'ngx-epic-video-player';
@NgModule({
...
imports: [
...
NgxEpicVideoPlayerModule,
],
...
})
-
Make use of it in one of the components living under the module in which you imported the library:
<vp-ngx-epic-video-player #evp [videoId]="'my-own-id'"
url="https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd">
</vp-ngx-epic-video-player>
-
Access to the component properties and methods through an Angular reference variable:
@ViewChild('evp') evp: NgxEpicVideoPlayerComponent;
...
this.evp.pause();
console.log(this.evp.volume());
this.evp.playbackRate(0.5)
this.evp.play();
...
-
The HTML <video>
element has been also exposed, so you can operate directly against it:
this.evp.getHtmlVideo().play();
You can also do this if you set your own id with the 'videoId' property:
document.getElementById('my-own-id').play();
-
pause()
Pauses the video playback.
-
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 in a 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.