An HTML5 media player, built using Angular. It has interface similar to Youtube player. It can be used in Angular 14 and above.
import { NgPlyrModule } from 'ng-plyr';
...
@NgModule({
imports: [
...
NgPlyrModule
],
...
})
export class AppModule { }
<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
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 |
- Shortcuts available for different buttons
- Can switch to PIP and Fullscreen
- Double tap to seek back/forward
- Shows buffer status on timeline
- Autofetch Video metadata
- Change playback speed
- Seek to specific time by clicking on timeline
- Control for media volume
- Show loading animation on buffering
- Play Next/Prev media
- Button for looping
- Show media title
- Cast to other devices
- While casting local player acts as remote
- Playing audio
- Switch for autoplay
- Provide media src
- Custom loading image can be set
- Bookmarks can be shown on timeline
- Looping the same media
- Provide more controls like volume, playfrom, loop etc.
- Emit events from ng-plyr: ended, playing, paused, volumechange, fullscreen etc.
- Playlist support
- Access to Player methods: play, pause, next, prev etc.
- Cast service methods are accessible
- Player theme can be customised
- Hide controls
- Multiple media sources
- Hover to play media thumnails
- Show bookmark text on hovering a bookmark
- Show image previews on hovering timeline
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 |
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.
- Volume slider UI