關(guān)于視頻播放饱搏，很早就想動筆了，只是基于當前選用技術(shù)置逻，還有不少要優(yōu)化的細節(jié)推沸，而我在考慮要不要把這些細節(jié)整理出來的過程中，文章就擱置了券坞。沒有這些細節(jié)鬓催，此文其實價值不大，不過當前還是簡單地給出方案恨锚，權(quán)當入門宇驾，細節(jié)將來有空再補充。
一般視頻的展示方式有兩種：縮略圖和直接播放猴伶，分別對應下面兩種效果（可參考直播應用和今日頭條視頻）：
而這兩種方式课舍，可分別使用以下方式處理：
一、使用Cordova插件播放他挎。
以官網(wǎng)推薦的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。
最后在調(diào)用的頁面如下使用（詳細使用請點插件鏈接進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標簽汰蓉，但是不同的瀏覽器實現(xiàn)的效果不一樣，往往需要自己定制樣式和配置屬性逸尖，像在ios上古沥，一般會添加下面兩屬性允許局部播放：
<video playsinline webkit-playsinline></video>
為了少摸索折騰，可以使用第三方js娇跟，如video.js和jplayer.js岩齿，對于ionic3，自然可以考慮videogular2苞俘，鏈接的是源碼盹沈，實際官網(wǎng)是這個：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標簽里面是各種組件，自己根據(jù)需要自行選用添加）：
<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]乞封，但名字可任意，表示創(chuàng)建一個作用域內(nèi)的臨時變量用示標識并操作同級組件岗憋。
然而當你運行查看效果時肃晚，會發(fā)現(xiàn)有問題：文字圖標不顯示，這個時候你可以修改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';
最后效果如圖：
但是晋修，你不要開心太早！
因為問題還存在著：當全屏時凰盔，尤其是android墓卦，會黑屏，可以開啟GPU硬件加速來解決户敬，但也并不是很好的方法落剪，此時可以使用偽全屏——用樣式模擬，這樣又涉及到橫豎屏切換的監(jiān)聽等等尿庐，這里不詳細說明著榴，有興趣可以看看此文（我沒驗證其可行性，只是看上去覺得思路大致一致）：
https://segmentfault.com/a/1190000006857675
當然屁倔，也可以兩者混合使用，組合操作就行暮胧，如全屏使用原生的全屏播放锐借。
在這里问麸，我簡單示范一下用兩步重寫全屏事件，屏蔽原來全屏的操作：
第一步是html 上的添加#fullscreen:
<vg-fullscreen #fullscreen></vg-fullscreen>
第二步是在ts中添加以下關(guān)鍵代碼：
import { VgFullscreen } from 'videogular2/src/controls/vg-fullscreen/vg-fullscreen';
@ViewChild('fullscreen') fullscreen: VgFullscreen;
ionViewDidLoad() {
this.fullscreen.onClick = ()=>{
//重寫全屏事件钞翔，下面換成自定義全屏操作
console.log('fullscreen');
};
}
原理很簡單严卖，就是找到全屏的組件，然后修改它的點擊方法布轿。
最最后哮笆，就算你解決了上述問題，你還是需要大致處理下以下問題：
- 視頻滾出可視區(qū)域汰扭，應停止播放稠肘；
- 當前視頻點擊播放，其它視頻應該全部停止萝毛；
- 全屏播放完成應退出全屏项阴；
- 播放時應自動隱藏播放控件，點擊屏幕時顯示播放控件笆包；
……
這些部分可配合videogular2的API來處理环揽。
