【技巧】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>
           ![](assets/imgs/eagle.jpg)
        </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来处理。