Ionic4框架下视频Videogular2的使用

Ionic4框架下视频Videogular2的使用

videogular2 API链接

1.首先要安装Videogular2的依赖

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,//1VgControlsModule,//2VgOverlayPlayModule,//3VgBufferingModule,//4IonicPageModule.forChild(TrailerPage),],
})
export class TrailerPageModule {
}

3.接着就在html文件中来使用videogular2提供的一系列标签

ts和css文件：

ts：
export class VideoPlayerPage implements OnInit {@ViewChild('myMedia') myMedia: VgMedia;videoPath:string;videoQuality1: BitrateOption = {qualityIndex: 720,width: 500,height: 300,bitrate: 1,mediaType: "video/mp4",label: "高清",};videoQuality2: BitrateOption = {qualityIndex: 960,width: 500,height: 300,bitrate: 1,mediaType: "video/mp4",label: "超清",};dashBitrates:Array = [];constructor() { }ngOnInit() {this.videoPath = "assets/demo.mp4";this.dashBitrates.push(this.videoQuality1, this.videoQuality2);}
}css：
.video-container {width: 100%;height: 30%;
}
.video-control-btn {width: 6%;margin-left: 3px;margin-right: 3px;
}
.video-control-voice {width: 15%;margin-left: 3px;margin-right: 3px;
}
.video-progress {width: 40%
}

上述代码中用到了一张默认初始展示的图片和一段mp4格式的视频都放在assets目录下

4.这些都写好运行会发现有些功能按钮图标和文字会显示不出来，解决方法是将node_modules\videogular2目录下的fonts文件夹复制粘贴到assets目录下，并且在index.html中添加videogular的样式文件

然后再运行就可以看到那些功能按钮以及文字了

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！