本文为原创文章,转载请标明出处

目录

  1. 使用 videogular2

    • 安装
    • 增加图标、字体支持
    • 导入 module
    • 举个例子
  2. 遇到的问题
    • iOS 端自动进入全屏播放
    • Android 端 autoplay 不起作用
  3. 更多

1. 使用 videogular2

安装

终端运行:

npm install videogular2 --save
npm install @types/core-js --save-dev

增加图标、字体支持

videogular2 GitHub 地址:https://github.com/videogular/videogular2

git clone 下来,将它的 fonts 文件夹 copy 到你的 Ionic 项目的 assets 文件夹中,在 index.html 中引入 videogular 的 css 文件:

<link rel="stylesheet" href="assets/fonts/videogular.css">

导入 module

导入你要使用 videogular2 的 page 的 module,比如说我要在 trailer.html 中使用,那我就导入到 trailer.module.ts 中。

import {NgModule} from '@angular/core';
import {IonicPageModule} from 'ionic-angular';
import {VgCoreModule} from 'videogular2/core';
import {VgControlsModule} from 'videogular2/controls';
import {VgOverlayPlayModule} from 'videogular2/overlay-play';
import {VgBufferingModule} from 'videogular2/buffering';
import {TrailerPage} from './trailer'; @NgModule({
declarations: [
TrailerPage,
],
imports: [
VgCoreModule,
VgControlsModule,
VgOverlayPlayModule,
VgBufferingModule,
IonicPageModule.forChild(TrailerPage),
],
})
export class TrailerPageModule {
}

举个例子

  <vg-player>
<vg-overlay-play></vg-overlay-play>
<vg-buffering></vg-buffering>
<vg-controls [vgAutohide]="true" [vgAutohideTime]="5">
<vg-play-pause></vg-play-pause>
<vg-time-display [vgProperty]="'current'"></vg-time-display>
<vg-scrub-bar>
<vg-scrub-bar-current-time [vgSlider]="true"></vg-scrub-bar-current-time>
<vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time>
</vg-scrub-bar>
<vg-time-display [vgProperty]="'total'"></vg-time-display>
<vg-fullscreen></vg-fullscreen>
</vg-controls>
<video #media [vgMedia]="media" poster="你的poster" src="你的src" autoplay></video>
</vg-player>

2. 遇到的问题

iOS 端自动进入全屏播放

video 标签加上 playsinline(iOS 10及以上)、webkit-playsinline(iOS 10之前)这两个属性。

另外还需要在 config.xml 文件中加上

<preference name="AllowInlineMediaPlayback" value="true" />

Android 端 autoplay 不起作用

这是谁的锅...说来话长...不管了...

3. 更多

  1. GitHub - videogular2
  2. videogular2 docs
  3. Cordova - Congig.xml

如有不当之处,请予指正,谢谢~

Ionic3学习笔记(十四)使用 videogular2 实现视频播放以及遇到的一些问题的更多相关文章

  1. python3.4学习笔记(十四) 网络爬虫实例代码,抓取新浪爱彩双色球开奖数据实例

    python3.4学习笔记(十四) 网络爬虫实例代码,抓取新浪爱彩双色球开奖数据实例 新浪爱彩双色球开奖数据URL:http://zst.aicai.com/ssq/openInfo/ 最终输出结果格 ...

  2. (C/C++学习笔记) 十四. 动态分配

    十四. 动态分配 ● C语言实现动态数组 C语言实现动态数组,克服静态数组大小固定的缺陷 C语言中,数组长度必须在创建数组时指定,并且只能是一个常数,不能是变量.一旦定义了一个数组,系统将为它分配一个 ...

  3. SharpGL学习笔记(十四) 材质:十二个材质球

    材质颜色 OpenGL用材料对光的红.绿.蓝三原色的反射率来近似定义材料的颜色.象光源一样,材料颜色也分成环境.漫反射和镜面反射成分,它们决定了材料对环境光.漫反射光和镜面反射光的反射程度.在进行光照 ...

  4. 【转】angular学习笔记(十四)-$watch(1)

    本篇主要介绍$watch的基本概念: $watch是所有控制器的$scope中内置的方法: $scope.$watch(watchObj,watchCallback,ifDeep) watchObj: ...

  5. angular学习笔记(十四)-$watch(1)

    本篇主要介绍$watch的基本概念: $watch是所有控制器的$scope中内置的方法: $scope.$watch(watchObj,watchCallback,ifDeep) watchObj: ...

  6. Java学习笔记十四:如何定义Java中的类以及使用对象的属性

    如何定义Java中的类以及使用对象的属性 一:类的重要性: 所有Java程序都以类class为组织单元: 二:什么是类: 类是模子,确定对象将会拥有的特征(属性)和行为(方法): 三:类的组成: 属性 ...

  7. MYSQL进阶学习笔记十四:MySQL 应用程序优化!(视频序号:进阶_32)

    知识点十五:MySQL 的应用程序优化(32) 一.访问数据库采用连接池 把连接当做对象或设备,统一放在‘连接池’里.凡是需要访问数据库的地方都从连接池里取连接 二.采用缓存减少对于MySQL的访问: ...

  8. Swift学习笔记十四:构造(Initialization)

         类和结构体在实例创建时,必须为全部存储型属性设置合适的初始值. 存储型属性的值不能处于一个未知的状态.     你能够在构造器中为存储型属性赋初值,也能够在定义属性时为其设置默认值.下面章节 ...

  9. JavaScript权威设计--Window对象之Iframe(简要学习笔记十四)

    1.Window对象属性的文档元素(id) 如果在HTML文档中用id属性来为元素命名,并且如果Window对象没有此名字的属性,Window对象会赋予一个属性,它的名字是id属性的值,而他们的值指向 ...

  10. Oracle学习笔记十四 内置程序包

    扩展数据库的功能 为 PL/SQL 提供对 SQL 功能的访问 用户 SYS 拥有所有程序包 是公有同义词 可以由任何用户访问 一些内置程序包 程序包名称 说明 STANDARD和DBMS_STAND ...

随机推荐

  1. druid socket timeout超时15分钟(转载)

    背景 在应用端通过mybatis的interceptor自定义Plugin拦截Executor, 统计输出sql的执行耗时. 今天生产发生一个很奇怪的问题: 莫名其妙卡顿15分钟+,其后正常返回sql ...

  2. java实现图片和pdf添加铺满文字水印

    依赖jar包 <!-- pdf start --> <dependency> <groupId>com.itextpdf</groupId> <a ...

  3. node 第三方库总结

    app.post("/todo/add", (request, response) => { request.body //如何拿到前端ajax传来的JSON数据 }) 需要 ...

  4. python_pycharm控制台输出带颜色

    一.书写格式: 设置颜色开始:\033[显示方式;前景色;背景色m] 结束:\033[0m 二.颜色参数: 前景色 背景色 颜色 ----------------------------------- ...

  5. FullPage.js中文帮助文档API

    fullPage.js的方法: 1. moveSectionUp() 功能:向上滚动一页. 2. moveSectionDown() 功能:向下滚动一页. 3. moveTo(section, sli ...

  6. windows安装theano和keras

    系统: Windows 2008 python版本: Anaconda3 1. theano 安装 pip install theano 2. 安装g++ 下载安装mingw, 推荐版本tdm64-g ...

  7. Hadoop_课堂笔记1

    1.课程目标 实践性 2.课下需要 在家搭建一个伪分布式 3.大数据概念和意义 08年Nature第一次正式提出大数据概念 常规的数据库:结构化的数据库 TB级的结构化数据管理就很困难,需要分布式 当 ...

  8. 基于Dijsktra算法的最短路径求解

    基于Dijsktra算法的最短路径求解   描述 一张地图包括n个城市,假设城市间有m条路径(有向图),每条路径的长度已知.给定地图的一个起点城市和终点城市,利用Dijsktra算法求出起点到终点之间 ...

  9. Multiple alleles|an intuitive argument|

    I.5 Multiple alleles. 由两个等位基因拓展到多个等位基因,可以得到更多种二倍体基因型: 所以单个等位基因的概率(用i代指某个基因,pi*是该基因的频率)是(以计数的方法表示) 所以 ...

  10. vue项目中的elementUI的table组件导出成excel表

    1.安装依赖:npm install --save xlsx file-saver 2.在放置需要导出功能的组件中引入 import FileSaver from 'file-saver' impor ...