Ionic3学习笔记（十四）使用 Videogular2 实现视频播放以及遇到的一些问题

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

<link rel="stylesheet" href="assets/fonts/videogular.css">

import {NgModule} from '@angular/core';
import {IonicPageModule} from 'ionic-angular';
import {VgCoreModule} from 'videogular2/core';
import {VgControlsModule} from 'videogular2/controls';
import {VgOverlayPlayModule} from 'videogular2/overlay-play';
import {VgBufferingModule} from 'videogular2/buffering';
import {TrailerPage} from './trailer';

@NgModule({
  declarations: [
    TrailerPage,
  ],
  imports: [
    VgCoreModule,
    VgControlsModule,
    VgOverlayPlayModule,
    VgBufferingModule,
    IonicPageModule.forChild(TrailerPage),
  ],
})
export class TrailerPageModule {
}

<vg-player>
  <vg-overlay-play></vg-overlay-play>
  <vg-buffering></vg-buffering>
  <vg-controls [vgAutohide]="true" [vgAutohideTime]="5">
    <vg-play-pause></vg-play-pause>
    <vg-time-display [vgProperty]="'current'"></vg-time-display>
    <vg-scrub-bar>
      <vg-scrub-bar-current-time [vgSlider]="true"></vg-scrub-bar-current-time>
      <vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time>
    </vg-scrub-bar>
    <vg-time-display [vgProperty]="'total'"></vg-time-display>
    <vg-fullscreen></vg-fullscreen>
  </vg-controls>
  <video #media [vgMedia]="media" poster="你的poster" src="你的src" autoplay></video>
</vg-player>

<preference name="AllowInlineMediaPlayback" value="true" />