videogular 的使用

官网参考地址：https://videogular.github.io/videogular2/docs/getting-started/how-videogular-works.html

• 1.命令行安装

npm install videogular2 --save
npm install @types/core-js --save-dev

• 2 在module中引入

import {VgCoreModule} from 'videogular2/core';
import {VgControlsModule} from 'videogular2/controls';
import {VgOverlayPlayModule} from 'videogular2/overlay-play';
import {VgBufferingModule} from 'videogular2/buffering';

@NgModule({
  declarations: [],
  imports: [
    VgCoreModule,
    VgControlsModule,
    VgOverlayPlayModule,
    VgBufferingModule,
  ],
  providers:[]
})
export class HomeModule { }

• 3在页面中使用方式

 <vg-player (onPlayerReady)="onPlayerReady($event)">
    <video [vgMedia]="media" #media id="bg_video" crossorigin  autoplay  preload="auto">
        <source src="../../../../assets/video/02.mp4" type="video/mp4">
    </video>
</vg-player>

• 4 ts中应用

import { Component, ViewChild, OnInit, AfterViewInit, AfterViewChecked, Inject } from '@angular/core';

import { VgAPI } from 'videogular2/core';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit, AfterViewInit {
 vgApi: VgAPI;
 
 ngAfterViewInit() {
    this.vgApi.subscriptions.canPlayThrough.subscribe(() => {
      let timer = setInterval(() => {
        if (this.vgApi.state === 'playing') {
          clearInterval(timer);
        } else {
          this.vgApi.play();
        }
      }, 1000);
    });
  }
  //初始化
  onPlayerReady(api: VgAPI) {
    this.vgApi = api;
  }
}

• 5 由于按照官网的操作无法正常的应用，所以在安装的时候使用的是6.4.0的版本,视频正常显示