【技巧】ionic3视频播放
关于视频播放，很早就想动笔了，只是基于当前选用技术，还有不少要优化的细节，而我在考虑要不要把这些细节整理出来的过程中，文章就搁置了。没有这些细节，此文其实价值不大，不过当前还是简单地给出方案，权当入门，细节将来有空再补充。
一般视频的展示方式有两种：缩略图和直接播放，分别对应下面两种效果（可参考直播应用和今日头条视频）：
缩略图.jpg
直接播放.PNG
而这两种方式，可分别使用以下方式处理：
一、使用Cordova插件播放。
以官网推荐的cordova-plugin-streaming-media插件为例：
首先安装插件，并安装相应的native模块：
ionic cordova plugin add cordova-plugin-streaming-media
npm install --save @ionic-native/streaming-media
其次在app.module.ts文件中的providers里添加StreamingMedia。
最后在调用的页面如下使用（详细使用请点插件链接进github查看）：
import { StreamingMedia, StreamingVideoOptions } from '@ionic-native/streaming-media';
constructor(private streamingMedia: StreamingMedia) { }
let options: StreamingVideoOptions = {
successCallback: () => { console.log('Video played') },
errorCallback: (e) => { console.log('Error streaming') },
orientation: 'landscape'
};
this.streamingMedia.playVideo('https://path/to/video/stream', options);
其效果是利用原生接口来播放视频。使用很简单，同样插件的功能也很简单，当要做一些个性化处理时，就要扩展源码了。
二、使用video标签播放
在手机端，浏览器基本都支持html5，所以可以使用video标签，但是不同的浏览器实现的效果不一样，往往需要自己定制样式和配置属性，像在ios上，一般会添加下面两属性允许局部播放：
<video playsinline webkit-playsinline></video>
为了少摸索折腾，可以使用第三方js，如video.js和jplayer.js，对于ionic3，自然可以考虑videogular2，链接的是源码，实际官网是这个：http://videogular.github.io/videogular2/
首先安装模块：
npm install videogular2 --save
npm install @types/core-js --save-dev
其次在app.module.ts里引入模块：
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: [],
bootstrap: []
})
export class AppModule {
}
最后在html中类似如下使用即可（vg-player标签里面是各种组件，自己根据需要自行选用添加）：
<ion-list no-lines>
<div *ngFor="let item of vm.sources">
<vg-player class="video-container">
<vg-overlay-play></vg-overlay-play>
<vg-buffering></vg-buffering>
<vg-controls>
<vg-play-pause></vg-play-pause>
<vg-playback-button></vg-playback-button>
<vg-time-display vgProperty="current" vgFormat="mm:ss"></vg-time-display>
<vg-time-display vgProperty="left" vgFormat="mm:ss"></vg-time-display>
<vg-time-display vgProperty="total" vgFormat="mm:ss"></vg-time-display>
<vg-mute></vg-mute>
<vg-volume></vg-volume>
<vg-fullscreen></vg-fullscreen>
</vg-controls>
<video #myMedia [vgMedia]="myMedia" id="{{item.id}}" class="video-js vjs-default-skin vjs-fluid"
height="210" preload="auto"
poster="assets/imgs/sudu.jpg"
crossorigin playsinline webkit-playsinline>
<source src="assets/oceans.mp4" type="video/mp4">
</video>
</vg-player>
<ion-item>
<ion-avatar item-left>
</ion-avatar>
<h2><strong>标题</strong></h2>
<h3>描述</h3>
</ion-item>
</div>
</ion-list>
其中#myMedia为必须的，提供给[vgMedia]，但名字可任意，表示创建一个作用域内的临时变量用示标识并操作同级组件。
然而当你运行查看效果时，会发现有问题：文字图标不显示，这个时候你可以修改node_modules下的源码(videoangular2或者@ionic)，一般我不建议(因为当删除并重新npm install时会覆盖丢失)，
此时，我们可以拷一份fonts放在src/assets下面，然后下面两种方式二选一即可：
方式一：在index.html添加一句：
<link href="assets/fonts/videogular.css" rel="stylesheet">
方式二：在app.scss或variables.scss添加一句：
@import '../assets/fonts/videogular.css';
最后效果如图：
image.png
但是，你不要开心太早！
因为问题还存在着：当全屏时，尤其是android，会黑屏，可以开启GPU硬件加速来解决，但也并不是很好的方法，此时可以使用伪全屏——用样式模拟，这样又涉及到横竖屏切换的监听等等，这里不详细说明，有兴趣可以看看此文（我没验证其可行性，只是看上去觉得思路大致一致）：
https://segmentfault.com/a/1190000006857675
当然，也可以两者混合使用，组合操作就行，如全屏使用原生的全屏播放。
在这里，我简单示范一下用两步重写全屏事件，屏蔽原来全屏的操作：
第一步是html 上的添加#fullscreen:
<vg-fullscreen #fullscreen></vg-fullscreen>
第二步是在ts中添加以下关键代码：
import { VgFullscreen } from 'videogular2/src/controls/vg-fullscreen/vg-fullscreen';
@ViewChild('fullscreen') fullscreen: VgFullscreen;
ionViewDidLoad() {
this.fullscreen.onClick = ()=>{
//重写全屏事件，下面换成自定义全屏操作
console.log('fullscreen');
};
}
原理很简单，就是找到全屏的组件，然后修改它的点击方法。
最最后，就算你解决了上述问题，你还是需要大致处理下以下问题：
- 视频滚出可视区域，应停止播放；
- 当前视频点击播放，其它视频应该全部停止；
- 全屏播放完成应退出全屏；
- 播放时应自动隐藏播放控件，点击屏幕时显示播放控件；
……
这些部分可配合videogular2的API来处理。
