ng-plyr

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

Add NgPlyrModule to your AppModule:

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

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

Add this tag to your Component html

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

OR

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

OR

<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

ng-plyr input attributes

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 events

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

Upcoming Inputs and Output events

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

Methods

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

Features

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

For Developers

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

Shortcuts

Key	Function
Space bar	Play/Pause
m	Mute/Unmute
i	Toggle miniplayer
f	Toggle fullscreen
k	Play/Pause
0 or home	Go to start
1 to 9	Go to 10% to 90%
end	Go to end
Up arrow	Volume up
Down arrow	Volume down
Left arrow	Seek back 5 sec
Right arrow	Seek ahead 5 sec
<	Decrease playback speed by .25x
>	Increase playback speed by .25x
Shift + N	Play next media
Shift + P	Play prev media

Cast setup

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.

Known issues

• Volume slider UI

Changelog

CHANGELOG.md

References

• Youtube Video: https://youtube.com/watch?v=ZeNyjnneq_w