# Mgmg videojs player

This is angular component used as video player .

- Beautiful and customizable styles 
- Built in one video playing service.

## Installation

MgmgVideoPlayer requires [Angular](https://angular.io/) v9+ to run.

####  Install the  devDependencies and package.

```sh
npm i --save-dev @types/video.js
npm i mgmg-ng-video-player
```

#### Import styles.

```css
@import 'mgmg-video-player/src/lib/mgmg-video-player.css'
```

#### You can change the theme color by change css variable called ```mgmgVidColor```

```css 
:root{
    --mgmgVidColor: #fff;
}

@import '../../mgmg-video-player/src/lib/mgmg-video-player.css';
```

#### Using player.
In HTML:

```html
<mgmg-video-player *ngIf="vidPlayerConf" [options]="vidPlayerConf"></mgmg-video-player>
```

In TS:

```javascript
export class AppComponent {
  vidPlayerConf: MgmgVidPlayer = {
    controls: true,
    preload: 'metadata',
    autoplay: true,
    sources: [{
      src: '../assets/vids/vidplayer.mp4',
      type:'video/mp4'
    }]
  }
}
```



## Options

| Plugin | Description |
| ------ | ------ |
| fluid | When true, the Video.js player will have a fluid size. In other words, it will scale to fit its container at the video's intrinsic aspect ratio, or at a specified ```aspectRatio```. |
| aspectRatio | Puts the player in fluid mode and the value is used when calculating the dynamic size of the player. The value should represent a ratio - two numbers separated by a colon (e.g. "16:9" or "4:3"). |
| height | Sets the display height of the video player in pixels. |
| width | Sets the display width of the video player in pixels. |
| preload | Suggests to the browser whether or not the video data should begin downloading as soon as the <video> element is loaded. Supported values are: ```auto``` Start loading the video immediately (if the browser supports it). Some mobile devices will not preload the video in order to protect their users' bandwidth/data usage. This is why the value is called 'auto' and not something more conclusive like 'true'. ```metadata```  default value,Load only the meta data of the video, which includes information like the duration and dimensions of the video. Sometimes, the meta data will be loaded by downloading a few frames of video., ```none``` Don't preload any data. The browser will wait until the user hits "play" to begin downloading. |
| autoplay | Play on load |
| controls | Show or hide controls, default is ```true``` |
| sources | video paths, It's an array but for this version the first video is just loaded . |