mat-video is an Angular component for playing videos. It has all the features you would expect from a standard video player, all in a very light package. The video player is designed to be flexible and easy to use; You can be up and running in less than 5 minutes!
It was built for modern browsers using TypeScript, CSS3, and HTML5 with Angular & Material 8/9+.
video player angular, how to play video in angular 8, angular video player library, angular video player npm, angular video player example
Features
- Native HTML5 video player
- Easy to use
- Play/Pause
- Seeking
- Volume
- Autoplay
- Preload
- Looping
- Scaling
- Fullscreen
- Download
- Buffering spinners
- Poster image
- Subtitles and text tracks
- Multiple media sources
- Customizable controls
- Material theming
- Keyboard shortcuts
- Fixed and responsive sizing
- Supports Chrome, Firefox, Safari, and Edge
Advanced HTML5 Video Player jQuery Plugin | aksVideoPlayer.js
How to make use of it:
Installation:
ng add @angular/material
1. To use mat-video in your project, install it via npm:
npm install --save mat-video
2. Add the following to your unit:
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { MatVideoModule } from 'mat-video'; @NgModule({ imports: [ BrowserAnimationsModule, MatVideoModule ], }) export class AppModule { }
3. A very simple example, in your HTML file:
<mat-video src="localOrRemoteVideo.mp4"></mat-video>
4. A slightly more specific example, in your HTML file:
<mat-video title="My Tutorial Title" [autoplay]="true" [preload]="true" [fullscreen]="true" [download]="false" color="accent" spinner="spin" poster="image.jpg"> <source matVideoSource src="tutorial.mp4" type="video/mp4"> <source src="tutorial.webm" type="video/webm"> <track matVideoTrack src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English"> <track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian"> </mat-video>
Angular 5/6 Video Player Using Material, mat-video Plugin/Github
See Demo And Download
Official Website(nkoehler): Click Here
This superior jQuery/javascript plugin is developed by nkoehler. For extra advanced usage, please go to the official website.