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

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

目录

  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 文件:

导入 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 {
}

举个例子

  
    
    
    
      
      
      
        
        
      
      
      
    
    
  

2. 遇到的问题

iOS 端自动进入全屏播放

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

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

Android 端 autoplay 不起作用

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

3. 更多

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

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

转载于:https://www.cnblogs.com/metaphors/p/8414082.html

你可能感兴趣的:(移动开发)