本文为原创文章，转载请标明出处

目录

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

如有不当之处，请予指正，谢谢～