TypeScript icon, indicating that this package has built-in type declarations

0.0.2 • Public • Published

Mgmg videojs player

This is angular component used as video player .

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


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

    --mgmgVidColor: #fff;

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

Using player.


<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',


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 .


npm i mgmg-video-player

DownloadsWeekly Downloads






Unpacked Size

290 kB

Total Files


Last publish


  • magx