mgmg-video-player

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-player

Import 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 .