Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

ngx-epic-video-player

Package Overview
Dependencies
Maintainers
1
Versions
17
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ngx-epic-video-player

Angular 2+ library to wrap different video libraries (at the moment, [dashjs](https://github.com/Dash-Industry-Forum/dash.js) and [hls.js](https://github.com/video-dev/hls.js)).

  • 1.0.6
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

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

AttributeTypeDefault valueDescription
autoplayboolean or stringundefinedWhether or not the video should start playing as soon as it is loaded.
controlsboolean or stringundefinedWhether or not the video should show the controls like play, pause, etc.
videoIdstringundefinedId to be set to the inner HTML video element.
loopboolean or stringundefinedWhether or not the video should start over again when finished.
mutedboolean or stringundefinedWhether or not the audio should be muted. It sets the muted property to the video element, but also set the volume to 0.
urlboolean or stringundefinedThe URL of the manifest for the video to be loaded.
initialRenditionKbpsnumber or stringundefinedThe Kbps of the desired initial rendition (valid for Dash)
initialRenditionIndexnumber or stringundefinedThe index of the desired initial rendition (valid for Hls)
posterstringundefinedPoster 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

NameProperties
IStatsTimeRangesstart: number;
end: number;
IStatsbuffered: IStatsTimeRanges[];
duration: number;
droppedFrames: number;
loadTime: number;
played: IStatsTimeRanges[];
seekable: IStatsTimeRanges[];
IRenditionaudioCodec?: 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

FAQs

Package last updated on 31 Jan 2019

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc