【技巧】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.scssvariables.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');
    };
  }

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

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏零基础使用Django2.0.1打造在线教育网站

爬取腾讯新闻首页资讯标题

终于进入到我们的实战内容篇了,因为是第一篇,所以找一个简单的例子给大家介绍爬取的详细过程,这既是对基础篇知识的运用,也是增强大家往后学习的动力。

4632
来自专栏练小习的专栏

从前端界面开发谈微信小程序体验

这段时间有幸加入了一个关于微信小程序的项目开发组,从无到有的根据文档自行学习了小程序的开发过程。

17K15
来自专栏姬小光

姬小光前端兴趣班【第008期】- 真正的切图大法

上一期我们使用了 word 转存大法来生成网页,主要是为了帮助大家理解表格布局的原理。那么今天我们就来学习一下真正的切图大法。

1362
来自专栏小特工作室

WinForm中播放视频示例(含源码)

1背景 这几天一老友要求我做个小软件,在WinForm播放视频.印象中微软有个WM控件直接可以使用,晚上研究下 2实现方式 2.1微软草根 最简单的方式,是...

2336
来自专栏开源项目

揭秘程序员眼中的 Vue 与 Angular | 码云周刊第 32 期

揭秘程序员眼中的 Vue 与 Angular 一 基于 Vue 的项目 1. 项目名称:基于 Vue.js 的 UI 组件库 ? 项目简介:iView 是一套...

3875
来自专栏angularejs学习篇

angularjs学习第五天笔记(第二篇:表单验证升级篇)

您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指...

913
来自专栏编程

也许 vue+css3 做交互特效更简单

1.前言 做项目就难免会开发交互效果或者特效,而我最近开发的项目一直在使用 ,开发技术栈方面,理所当然就使用了 + 开发,过程中发现使用 + 开发特效,和 / ...

21610
来自专栏极客编程

用Vue.js开发一个电影App的前端界面

我们大多数人使用在线流媒体服务(如Netflix)观看我们最喜欢的电影或者节目。这篇文章将重点介绍如何通过使用vue.js 2 建立一个类似风格的电影流媒体WE...

2.5K1
来自专栏Youngxj

一张好看的404页面源码

5166
来自专栏向治洪

android的适配方法

首先要介绍一下drawable-mdpi、drawable-hdpi-1280x800、drawable-hdpi。这个相信好好看一下也明白。就是代表着分辨率 ...

2217

扫码关注云+社区

领取腾讯云代金券