【技巧】ionic3视频播放

关于视频播放,很早就想动笔了,只是基于当前选用技术,还有不少要优化的细节,而我在考虑要不要把这些细节整理出来的过程中,文章就搁置了。没有这些细节,此文其实价值不大,不过当前还是简单地给出方案,权当入门,细节将来有空再补充。

一般视频的展示方式有两种:缩略图和直接播放,分别对应下面两种效果(可参考直播应用和今日头条视频):

【技巧】ionic3视频播放_第1张图片
缩略图.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上,一般会添加下面两属性允许局部播放:


为了少摸索折腾,可以使用第三方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标签里面是各种组件,自己根据需要自行选用添加):


    
![](assets/imgs/eagle.jpg)

标题

描述

其中#myMedia为必须的,提供给[vgMedia],但名字可任意,表示创建一个作用域内的临时变量用示标识并操作同级组件。

然而当你运行查看效果时,会发现有问题:文字图标不显示,这个时候你可以修改node_modules下的源码(videoangular2或者@ionic),一般我不建议(因为当删除并重新npm install时会覆盖丢失),
此时,我们可以拷一份fonts放在src/assets下面,然后下面两种方式二选一即可:
方式一:index.html添加一句:


方式二:app.scssvariables.scss添加一句:

@import '../assets/fonts/videogular.css';

最后效果如图:


【技巧】ionic3视频播放_第2张图片
image.png

但是,你不要开心太早!

因为问题还存在着:当全屏时,尤其是android,会黑屏,可以开启GPU硬件加速来解决,但也并不是很好的方法,此时可以使用伪全屏——用样式模拟,这样又涉及到横竖屏切换的监听等等,这里不详细说明,有兴趣可以看看此文(我没验证其可行性,只是看上去觉得思路大致一致):
https://segmentfault.com/a/1190000006857675

当然,也可以两者混合使用,组合操作就行,如全屏使用原生的全屏播放。

在这里,我简单示范一下用两步重写全屏事件,屏蔽原来全屏的操作:
第一步是html 上的添加#fullscreen:


第二步是在ts中添加以下关键代码:

import { VgFullscreen } from 'videogular2/src/controls/vg-fullscreen/vg-fullscreen';

  @ViewChild('fullscreen') fullscreen: VgFullscreen;
  ionViewDidLoad() {
    this.fullscreen.onClick = ()=>{
      //重写全屏事件,下面换成自定义全屏操作
      console.log('fullscreen');
    };
  }

原理很简单,就是找到全屏的组件,然后修改它的点击方法。

最最后,就算你解决了上述问题,你还是需要大致处理下以下问题:

  1. 视频滚出可视区域,应停止播放;
  2. 当前视频点击播放,其它视频应该全部停止;
  3. 全屏播放完成应退出全屏;
  4. 播放时应自动隐藏播放控件,点击屏幕时显示播放控件;
    ……
    这些部分可配合videogular2的API来处理。

你可能感兴趣的:(【技巧】ionic3视频播放)