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 v9+ to run.
Install the devDependencies and package.
npm i --save-dev @types/video.js
npm i mgmg-ng-video-playerImport styles.
@import 'mgmg-video-player/src/lib/mgmg-video-player.css'You can change the theme color by change css variable called mgmgVidColor
:root{
--mgmgVidColor: #fff;
}
@import '../../mgmg-video-player/src/lib/mgmg-video-player.css';Using player.
In HTML:
<mgmg-video-player *ngIf="vidPlayerConf" [options]="vidPlayerConf"></mgmg-video-player>In TS:
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 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 . |