Ionic3学习笔记(十四)使用 videogular2 实现视频播放以及遇到的一些问题
2024-09-07 05:31:34
本文为原创文章,转载请标明出处
目录
- 使用 videogular2
- 安装
- 增加图标、字体支持
- 导入 module
- 举个例子
- 遇到的问题
- iOS 端自动进入全屏播放
- Android 端 autoplay 不起作用
- 更多
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. 更多
如有不当之处,请予指正,谢谢~
最新文章
- Objective-C三种定时器CADisplayLink / NSTimer / GCD的使用
- Mapcontrol 遍历所有图层方法
- C# 轻量级ORM 编写思维
- 订阅Linux内核的邮件列表
- unreal3之FName及潜在bug
- 微信公众平台入门开发教程.Net(C#)框架
- NSTimer scheduledTimerWithTimeInterval与timerWithTimeInterval、initWithFireDate的区别
- 批量删除亚马逊kindle云端文档
- win32 Ui 编程 收集
- Multiply Strings [LeetCode]
- OA学习笔记-003-Hibernate3.6配置
- TCP 的那些事儿(上)
- Flask+Mysql搭建网站之网页设计
- 像素转换问题-队列解决办法(或者dfs)
- eclipse配置相关
- Google会思考的深度学习系统
- jenkins+ant+jmeter测试环境部署
- getopt()函数 命令解析
- [Swift]LeetCode144. 二叉树的前序遍历 | Binary Tree Preorder Traversal
- tcp和udp区别