ng-plyr (NGP)

An HTML5 media player, built using Angular. It has interface similar to Youtube player. It can be used in Angular 14 and above.

Usage

import { NgPlyrModule } from 'ng-plyr';
...

@NgModule({
  imports: [
    ...
    NgPlyrModule
  ],
  ...
})
export class AppModule { }

<ng-plyr src='https://example.com/video.mp4'></ng-plyr>

<ng-plyr [src]='mediaUrl'></ng-plyr>

<ng-plyr [playlist]='mediaArr'></ng-plyr>

And assign value to mediaUrl in component.ts

Note: playlist is preferred over src, so if both are passed, media will play from playlist

Input	Type	Description
`src`	`string`	URL of media source
`preload`	`string`	Same as HTML `<video>` preload Attribute
`loadingImgSrc`	`string`	URL of custom loading image
`playFrom`	`number`	Play media starting from specified second
`volume`	`number`	Keep playing the same media over and over
`loop`	`boolean`	Play media starting from specified second
`bookmarks`	`number[]`	Array of seconds within media max duration
`autoplay`	`boolean`	Enable/disable autoplay
`nextMedia`	`Media`	Media to be played next
`playlist`	`Media[]`	Pass entire playlist to play
`loopPlaylist`	`boolean`	Loop over playlist
`poster`	`string`	URL of the poster image

Output	Type	Description
`playing`	`boolean`	Media started to play
`paused`	`boolean`	Media paused
`ended`	`boolean`	Media ended
`onnext`	`Media`	Playing next media
`onprev`	`Media`	Playing previous media
`fullscreen`	`boolean`	Media entered/exited fullscreen
`volumechange`	`{ level:number, muted:boolean }`	Volume changed or muted/unmuted

Input	Type	Description
`type`	`MediaType`	Specify media type
`captions`	`[{ path: string, lang: string }]`	Add captions to media

Output	Type	Description
`error`	`object`	Details of any error if occured

Method(arg:type)	Description
`play()`	Play current media
`pause()`	Pause current media
`next()`	Play next media
`prev()`	Play prev media
`enableMediaLooping(loop?:boolean)`	Turn on loop for media (default true)
`enablePlaylistLooping(loop?:boolean)`	Turn on loop for playlist (default true)
`changeVolume(level:number)`	Set volume to level (0 to 1)
`seekTo(atSecond:number)`	Seek media to specific second
`setPlaybackSpeed(rate:number)`	Set media playback rate (range, .25 to 2)
`getCurrentlyPlaying()`	Get currently playing Media
`getNextMedia()`	Get nextMedia
`getNumOfMediaInPlaylist()`	Get number of media items in playlist
`addToPlaylist(mediaItems:Media[], atStart?:boolean)`	Add mediaItems to playlist at end/start
`playNext(media:Media[])`	Add media to playlist after current media

<input checked="" disabled="" type="checkbox"> Shortcuts available for different buttons
<input checked="" disabled="" type="checkbox"> Can switch to PIP and Fullscreen
<input checked="" disabled="" type="checkbox"> Double tap to seek back/forward
<input checked="" disabled="" type="checkbox"> Shows buffer status on timeline
<input checked="" disabled="" type="checkbox"> Autofetch Video metadata
<input checked="" disabled="" type="checkbox"> Change playback speed
<input checked="" disabled="" type="checkbox"> Seek to specific time by clicking on timeline
<input checked="" disabled="" type="checkbox"> Control for media volume
<input checked="" disabled="" type="checkbox"> Show loading animation on buffering
<input checked="" disabled="" type="checkbox"> Play Next/Prev media
<input checked="" disabled="" type="checkbox"> Button for looping
<input checked="" disabled="" type="checkbox"> Show media title
<input checked="" disabled="" type="checkbox"> Cast to other devices
<input checked="" disabled="" type="checkbox"> While casting local player acts as remote
<input disabled="" type="checkbox"> Playing audio
<input disabled="" type="checkbox"> Switch for autoplay

<input checked="" disabled="" type="checkbox"> Provide media src
<input checked="" disabled="" type="checkbox"> Custom loading image can be set
<input checked="" disabled="" type="checkbox"> Bookmarks can be shown on timeline
<input checked="" disabled="" type="checkbox"> Looping the same media
<input checked="" disabled="" type="checkbox"> Provide more controls like volume, playfrom, loop etc.
<input checked="" disabled="" type="checkbox"> Emit events from ng-plyr: ended, playing, paused, volumechange, fullscreen etc.
<input checked="" disabled="" type="checkbox"> Playlist support
<input checked="" disabled="" type="checkbox"> Access to Player methods: play, pause, next, prev etc.
<input checked="" disabled="" type="checkbox"> Cast service methods are accessible
<input checked="" disabled="" type="checkbox"> Player theme can be customised
<input checked="" disabled="" type="checkbox"> Hide controls
<input disabled="" type="checkbox"> Multiple media sources
<input disabled="" type="checkbox"> Hover to play media thumnails
<input disabled="" type="checkbox"> Show bookmark text on hovering a bookmark
<input disabled="" type="checkbox"> Show image previews on hovering timeline

Add below script in index.html

<script type="text/javascript" src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>

Now you an use CastService methods in your components.