ng-plyr v0.6.3

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

Output events

Upcoming Inputs and Output events

Methods

Features

• 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

For Developers

• 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

Shortcuts

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