本文為原創(chuàng)文章，轉(zhuǎn)載請標明出處

目錄

1. 使用 videogular2
   • 安裝
   • 增加圖標、字體支持
   • 導入 module
   • 舉個例子
2. 遇到的問題
   • iOS 端自動進入全屏播放
   • Android 端 autoplay 不起作用
3. 更多

1. 使用 videogular2

安裝

終端運行:

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

增加圖標、字體支持

videogular2 GitHub 地址：https://github.com/videogular/videogular2

git clone 下來，將它的 fonts 文件夾 copy 到你的 Ionic 項目的 assets 文件夾中，在 index.html 中引入 videogular 的 css 文件：

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

導入 module

導入你要使用 videogular2 的 page 的 module，比如說我要在 trailer.html 中使用，那我就導入到 trailer.module.ts 中。

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>

2. 遇到的問題

iOS 端自動進入全屏播放

給 video 標簽加上 playsinline（iOS 10及以上）、webkit-playsinline（iOS 10之前）這兩個屬性。

另外還需要在 config.xml 文件中加上

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

Android 端 autoplay 不起作用

這是誰的鍋...說來話長...不管了...

3. 更多

1. GitHub - videogular2
2. videogular2 docs
3. Cordova - Congig.xml

如有不當之處，請予指正，謝謝～