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提供的一系列标签

<vg-player class="video-container">
    <vg-overlay-play></vg-overlay-play>
    <vg-buffering></vg-buffering>
    <vg-controls [vgAutohide]="true" [vgAutohideTime]="3">
        <vg-play-pause class="video-control-btn"></vg-play-pause><!--暂停和恢复播放-->
        <vg-playback-button class="video-control-btn"></vg-playback-button><!--倍速播放-->

        <vg-time-display class="video-control-btn" vgProperty="current" vgFormat="mm:ss"></vg-time-display>
        <vg-scrub-bar class="video-progress">
            <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="left" vgFormat="mm:ss"></vg-time-display>-->
        <vg-time-display class="video-control-btn" vgProperty="total" vgFormat="mm:ss"></vg-time-display>
        <vg-mute class="video-control-btn"></vg-mute><!--当前音量和静音之间切换-->
        <vg-quality-selector class="video-control-btn" [bitrates]="dashBitrates"
                                 (onBitrateChange)="vgDash.setBitrate($event)">
        </vg-quality-selector>
        <!--<vg-volume class="video-control-voice"></vg-volume>&lt;!&ndash;更改音量&ndash;&gt;-->
        <vg-fullscreen class="video-control-btn"></vg-fullscreen><!--全屏和非全屏之间切换-->
    </vg-controls>
    <video #myMedia [vgMedia]="myMedia" id="my-video"
               height="200" preload="auto"
               poster="assets/img/icon_head.jpg"
               crossorigin playsinline webkit-playsinline>
        <source src="{{videoPath}}" type="video/mp4">
    </video>
</vg-player>

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<BitrateOption> = [];
    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的样式文件

    <link href="assets/fonts/videogular.css" rel="stylesheet">

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