Neovictorian Paisley Menswear

    ngx-epic-video-player
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.6 • Public • Published

    ngx-epic-video-player

    Angular 2+ library to wrap different video libraries (at the moment, dashjs and hls.js).

    To see a live demo click here.

    NB: This library is in progress and it still lacks a lot of features that are needed to work with video in the real world. You are more than welcome to contribute, ask for features and buy me a beer (not PayPal, just ask me for my postal address and you can directly send me the beer :D).

    Installation

    1. Install the dependency into your Angular 2+ project

      $ npm install ngx-epic-video-player
      
    2. 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,
        ],
        ...
      })
      
    3. 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>
      
    4. 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();
      
      ...
      
    5. 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();
          
      

    API

    Attributes

    Attribute Type Default value Description
    autoplay boolean or string undefined Whether or not the video should start playing as soon as it is loaded.
    controls boolean or string undefined Whether or not the video should show the controls like play, pause, etc.
    videoId string undefined Id to be set to the inner HTML video element.
    loop boolean or string undefined Whether or not the video should start over again when finished.
    muted boolean or string undefined Whether or not the audio should be muted. It sets the muted property to the video element, but also set the volume to 0.
    url boolean or string undefined The URL of the manifest for the video to be loaded.
    initialRenditionKbps number or string undefined The Kbps of the desired initial rendition (valid for Dash)
    initialRenditionIndex number or string undefined The index of the desired initial rendition (valid for Hls)
    poster string undefined Poster URL. This attribute will be set to the native video element (W3C)[https://www.w3.org/TR/2009/WD-html5-20090825/video.html#attr-video-poster]

    Methods

    • 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.

    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;

    Event emitters

    • abortEvent as defined by W3C
    • canplayEvent as defined by W3C
    • canplaythroughEvent as defined by W3C
    • durationchangeEvent as defined by W3C
    • emptiedEvent as defined by W3C
    • endedEvent as defined by W3C
    • errorEvent as defined by W3C
    • loadeddataEvent as defined by W3C
    • loadedmetadataEvent as defined by W3C
    • loadstartEvent as defined by W3C
    • playEvent as defined by W3C
    • playingEvent as defined by W3C
    • progressEvent as defined by W3C
    • ratechangeEvent as defined by W3C
    • seekedEvent as defined by W3C
    • seekingEvent as defined by W3C
    • stalledEvent as defined by W3C
    • suspendEvent as defined by W3C
    • timeupdateEvent as defined by W3C
    • volumechangeEvent as defined by W3C
    • waitingEvent as defined by W3C

    Keywords

    none

    Install

    npm i ngx-epic-video-player

    DownloadsWeekly Downloads

    23

    Version

    1.0.6

    License

    none

    Unpacked Size

    614 kB

    Total Files

    38

    Last publish

    Collaborators

    • adripanico