# mgmg-video-player

> This is angular component used as video player .

Latest version **0.0.2** (published 2023-01-04) · 0 weekly downloads

## Install

```sh
npm install mgmg-video-player
pnpm add mgmg-video-player
yarn add mgmg-video-player
bun add mgmg-video-player
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2023-01-04 |
| First published | 2023-01-04 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | 16.18.0 |
| Dependencies | 2 |
| Unpacked size | 283.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Magdy Elsayyad |
| Maintainers | magx |
| Keywords | Angular, videojs, video player |

## Links

- npm: https://www.npmjs.com/package/mgmg-video-player
- npm.io page: https://npm.io/package/mgmg-video-player

## Dependencies (2)

- [tslib](https://npm.io/package/tslib.md) ^2.3.0
- [video.js](https://npm.io/package/video.js.md) ^7.20.3

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 0.0.2 (latest) — 2023-01-04
- 0.0.4 (0.0.1) — 2023-01-04
- 0.0.3 — 2023-01-04

## README

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

---
_Source: https://npm.io/package/mgmg-video-player · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._