Ionic4框架下视频Videogular2的使用

Ionic4框架下视频Videogular2的使用

videogular2 API链接

1.首先要安装Videogular2的依赖

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

2.在你要使用video控件的页面的module.ts文件中引入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,//1
    VgControlsModule,//2
    VgOverlayPlayModule,//3
    VgBufferingModule,//4
    IonicPageModule.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的样式文件


    

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

你可能感兴趣的:(android)