ionic3 视频播放、直播流播放

最新推荐文章于 2022-06-28 10:41:20 发布

ken2999

最新推荐文章于 2022-06-28 10:41:20 发布

阅读量1k

点赞数

分类专栏： ionic angular4.x

原文链接：https://blog.csdn.net/weixin_40136051/article/details/80847956

版权

ionic 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

angular4.x

3 篇文章 0 订阅

订阅专栏

使用cordova的videogular2插件，点击查看详情

安装videogular2插件

npm install videogular2 --save
npm install @types/core-js --save-dev
文件 src/app/app.module.ts 中使用方法

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {VgCoreModule} from 'videogular2/core';
import {VgControlsModule} from 'videogular2/controls';
import {VgOverlayPlayModule} from 'videogular2/overlay-play';
import {VgBufferingModule} from 'videogular2/buffering';
import {SingleMediaPlayer} from './single-media-player';

@NgModule({
declarations: [SingleMediaPlayer],
imports: [
BrowserModule,
VgCoreModule,
VgControlsModule,
VgOverlayPlayModule,
VgBufferingModule
],
providers: [],
bootstrap: [SingleMediaPlayer]
})
export class AppModule {
}
在node_modules目录中找到videogular2，将目录下的fonts文件夹复制onic 项目的 assets文件夹中，在 index.html 中引入 videogular2的 css 文件：

<preference name="AllowInlineMediaPlayback" value="true" />
视频自动转屏，采用ionic设备横竖屏切换插件：cordova-plugin-screen-orientation
$ ionic cordova plugin add cordova-plugin-screen-orientation
$ npm install --save @ionic-native/screen-orientation
前端文件代码：
<vg-player>
<video [vgMedia]="media" #media id="singleVideo" preload="auto" controls>
<source src="http://static.videogular.com/assets/videos/videogular.mp4" type="video/mp4">
</video>
</vg-player>

---------------------
版权声明：本文为CSDN博主「王东升」的原创文章，遵循CC 4.0 by-sa版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_40136051/article/details/80847956

以上为转载，下面为使用笔记

angular 版本 5 的朋友，安装 videogular2 时需要选择 5.x.x 版本安装。

我安装的版本为：npm install videogular2@5.3.0 --save

获取API

<vg-player (onPlayerReady)="onPlayerReady($event)" style=" width: 100%; height: 180px;">
      <video [vgMedia]="media" #media id="singleVideo" preload="auto" controls poster="assets/imgs/new/other/video2.jpg" >
          <source src="http://static.videogular.com/assets/videos/videogular.mp4" type="video/mp4">
      </video>
</vg-player>

ts文件里，通过ID（singleVideo）获取视频对象

 /** 播放视频 开始 **/
  public vgApi:VgAPI;
  onPlayerReady(api:VgAPI) {
      this.vgApi = api;
      // this.vgApi.getMediaById('singleVideo').subscriptions.ended.subscribe(
      //     () => {
      //         // Set the video to the beginning
      //         this.vgApi.getDefaultMedia().currentTime = 0;
      //     }
      // );
  }
  //停止播放视频
  stop_vg(){
    var video = this.vgApi.getMediaById('singleVideo');//通过ID 获取视频对象
    //video.currentTime = 0; // Set the video to the beginning
    video.pause();//暂时播放
  }
  /** 播放视频 结束 **/