Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/nkoehler/mat-video

:tv: mat-video is an Angular 8/9+ video player using Material!
https://github.com/nkoehler/mat-video

angular angular8 angular9 css3 html html5 mat-video material typescript video video-player

Last synced: about 2 months ago
JSON representation

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

Awesome Lists containing this project

README 

        
**July 2020 - This project is no longer maintained**



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

[![npm version](https://badge.fury.io/js/mat-video.svg)](https://badge.fury.io/js/mat-video)

[![Build Status](https://travis-ci.org/nkoehler/mat-video.svg?branch=master)](https://travis-ci.org/nkoehler/mat-video)

[![Maintainability](https://api.codeclimate.com/v1/badges/46fb1a751d60d0f8b316/maintainability)](https://codeclimate.com/github/nkoehler/mat-video/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](https://github.com/nkoehler/mat-video/blob/master/CHANGELOG.md) for recent changes.  



If you wish to contribute, please fill out the [pull request template](https://github.com/nkoehler/mat-video/blob/master/CONTRIBUTING.md).  For issues, please fill out the [issue template](https://github.com/nkoehler/mat-video/blob/master/ISSUE_TEMPLATE.md) 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](https://material.angular.io/guide/getting-started) as a peer dependency, including animations and a theme.



```

ng add @angular/material

```



To use **mat-video** in your project install it via [npm](https://www.npmjs.com/package/mat-video):



```

npm install --save mat-video

```



Add the following to your module:



```typescript

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:



```html

    

```



A slightly more customized example, in your HTML file:



```html

    

      

      

      

      

    

```



## API

Attribute | Type | Description | Default

--- | --- | --- | ---

*src* | **string, MediaStream, MediaSource, Blob** | Path, URL, or `srcObject` for a video | *null*

*title* | **string** | Title for the video | *null*

*autoplay* | **boolean** | Whether the video should autoplay | *false*

*preload* | **boolean** | Whether the video should preload | *true*

*loop* | **boolean** | Whether the video should loop | *false*

*time* | **number** (two-way bindable) | Get or set the timestamp of the video | *0*

*muted* | **boolean** (two-way bindable) | Get or set whether the video is muted | *false*

*quality* | **boolean** | Whether the video will have a quality indicator | *true*

*download* | **boolean** | Whether the video will have a download option | *false*

*fullscreen* | **boolean** | Whether the video will have a fullscreen option | *true*

*playsinline* | **boolean** | Whether the video should play inline | *false*

*showFrameByFrame* | **boolean** | Whether the video will display frame-by-frame controls | *false*

*keyboard* | **boolean** | Whether the player will have keyboard shortcuts | *true*

*overlay* | **boolean** | Force the overlay/controls to be shown or hidden | *null*

*color* | **ThemePalette** | Material theme color palette for the sliders | *primary*

*spinner* | **string** | Use 'spin', 'dot', 'split-ring', 'hourglass', or pass your own buffering spinner class | *spin*

*poster* | **string** | Path or URL to a poster image | *null*



In addition, [source](https://www.w3schools.com/tags/tag_source.asp) and [track](https://www.w3schools.com/tags/tag_track.asp) 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:



```html

    

```



In your TS file:



```typescript

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 Version | Angular Version

--- | ---

1.0.0 - 2.7.2 | Angular 5, 6, 7, 8

2.8.0+ | Angular 8, 9



## Credits

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



Special thanks:

- [mediapack-me](https://github.com/mediapack-me) for responsive assistance.

- [buu700](https://github.com/buu700) for several features and fixes.

- [fabiomartino](https://github.com/fabiomartino) for modernizing project structure.