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

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

目录

使用 videogular2

安装

增加图标、字体支持

导入 module

举个例子

遇到的问题

iOS 端自动进入全屏播放

Android 端 autoplay 不起作用

更多

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. 更多

GitHub - videogular2

videogular2 docs

Cordova - Congig.xml

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