2.8.1 • Published 4 years ago

mat-video v2.8.1

Weekly downloads
2,307
License
MIT
Repository
github
Last release
4 years ago

mat-video is an Angular 8/9+ video player using Material

npm version Build Status Maintainability

mat-video is an Angular component for playing videos. It has all the features you would expect from a standard video player, all in an extremely 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+.

See the changelog for recent changes.

If you wish to contribute, please fill out the pull request template. For issues, please fill out the issue template before submitting.

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

Installation

mat-video requires Angular Material as a peer dependency, including animations and a theme.

ng add @angular/material

To use mat-video in your project install it via npm:

npm install --save mat-video

Add the following to your module:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatVideoModule } from 'mat-video';

@NgModule({
  imports: [
    BrowserAnimationsModule,
    MatVideoModule
  ],
})
export class AppModule { }

Usage

A minimal example is quite simple, in your HTML file:

    <mat-video src="localOrRemoteVideo.mp4"></mat-video>

A slightly more customized 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>

API

AttributeTypeDescriptionDefault
srcstring, MediaStream, MediaSource, BlobPath, URL, or srcObject for a videonull
titlestringTitle for the videonull
autoplaybooleanWhether the video should autoplayfalse
preloadbooleanWhether the video should preloadtrue
loopbooleanWhether the video should loopfalse
timenumber (two-way bindable)Get or set the timestamp of the video0
mutedboolean (two-way bindable)Get or set whether the video is mutedfalse
qualitybooleanWhether the video will have a quality indicatortrue
downloadbooleanWhether the video will have a download optionfalse
fullscreenbooleanWhether the video will have a fullscreen optiontrue
playsinlinebooleanWhether the video should play inlinefalse
showFrameByFramebooleanWhether the video will display frame-by-frame controlsfalse
keyboardbooleanWhether the player will have keyboard shortcutstrue
overlaybooleanForce the overlay/controls to be shown or hiddennull
colorThemePaletteMaterial theme color palette for the slidersprimary
spinnerstringUse 'spin', 'dot', 'split-ring', 'hourglass', or pass your own buffering spinner classspin
posterstringPath or URL to a poster imagenull

In addition, source and track elements are supported by mat-video.

The matVideoSource attribute can be used on the source tag to automatically reload the video when the source changes.

The matVideoTrack attribute can be used on the track tag to automatically reload the video when the track changes.

Events

Listening to video events can be accomplished by directly accessing the video tag within mat-video.

In your HTML file:

    <mat-video #video src="localOrRemoteVideo.mp4"></mat-video>

In your TS file:

export class SampleComponent implements OnInit {
  @ViewChild('video') matVideo: MatVideoComponent;
  video: HTMLVideoElement;

  constructor(private renderer: Renderer2) { }

  ngOnInit(): void {
    this.video = this.matVideo.getVideoTag();

    // Use Angular renderer or addEventListener to listen for standard HTML5 video events
    
    this.renderer.listen(this.video, 'ended', () => console.log('video ended'));
    this.video.addEventListener('ended', () => console.log('video ended'));
  }
}

This API feature is considered experimental, and is subject to change.

Compatibility

mat-video supports the last two major Angular versions. Previous versions of mat-video support older versions of Angular.

mat-video VersionAngular Version
1.0.0 - 2.7.2Angular 5, 6, 7, 8
2.8.0+Angular 8, 9

Credits

mat-video is an open-source project developed by Nicholas Koehler.

Special thanks:

2.8.1

4 years ago

2.8.0

4 years ago

2.7.2

5 years ago

2.7.1

5 years ago

2.7.0

5 years ago

2.6.0

5 years ago

2.5.1

5 years ago

2.5.0

5 years ago

2.4.0

5 years ago

2.3.0

6 years ago

2.2.0

6 years ago

2.1.0

6 years ago

2.0.0

6 years ago

1.4.0

6 years ago

1.3.1

6 years ago

1.3.0

6 years ago

1.2.1

6 years ago

1.2.0

6 years ago

1.1.2

6 years ago

1.1.1

6 years ago

1.1.0

6 years ago

1.0.4

6 years ago

1.0.3

6 years ago

1.0.2

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago