Angular中怎么自定义视频播放器-猿码集

1. 前言

视频播放器是我们常见的一种应用，特别是在一些教育和娱乐网站上。如今，我们的浏览器支持HTML5，本身已经内置了视频播放器，在视觉上也提供了良好的效果。然而，仅仅使用HTML5内置的视频播放器可能无法满足我们的需求，这时候我们需要一些自定义的操作和控制。本文将介绍在Angular中如何自定义视频播放器。

2. 搭建工程

2.1 安装Angular CLI

在开始之前，我们需要搭建一个基于Angular的工程。首先，我们需要在本地安装好Angular CLI，命令如下：

npm install -g @angular/cli

安装成功之后，执行下列命令，创建一个新工程：

ng new video-player

执行完此命令后，会询问使用哪个样式库，我选择使用CSS。等待命令行执行完毕后，我们就有了一个基于Angular的工程。

2.2 安装依赖

接下来，我们需要安装一些插件，这些插件帮助我们达成自定义视频播放器的目标。

npm install video.js --save npm install @types/video.js --save-dev npm install ngx-videogular --save

npm install ngx-videogular-themes --save

video.js ：Video.js是一款开源的Web视频播放器，提供HTML5和Flash两种播放模式。

@types/video.js ：这是Video.js的typescript类型定义，方便我们在Angular中编写TypeScript代码。

ngx-videogular ：ngx-videogular是基于Videogular2构建的Angular插件。

ngx-videogular-themes ：这个插件提供了一个主题，可作为视频播放器的样式表。

3. 使用ngx-videogular

在我们的代码中，可以很容易地使用ngx-videogular这个插件。

3.1 在工程中引入VideogularModule

我们需要先引入Videogular2核心模块，打开app.module.ts文件，并按照下列方式添加：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import {VgCoreModule, VgControlsModule, VgOverlayPlayModule, VgBufferingModule} from 'ngx-videogular';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    VgCoreModule,
    VgControlsModule,
    VgOverlayPlayModule,
    VgBufferingModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

在上面的代码中，VgCoreModule就是ngx-videogular的主模块，VgControlsModule、VgOverlayPlayModule和VgBufferingModule为ngx-videogular的一些插件模块，顾名思义，一个控制模块，一个覆盖层播放模块，一个缓冲模块模块。

3.2 编写HTML模板

下面代码展示的是HTML页面上，如何编写自定义视频播放器的基本模板：

<vg-player (onPlayerReady)="onPlayerReady($event)" (onUpdateTime)="onUpdateTime($event)" class="video-player">
    <video [vgMedia]="media" [poster]="../assets/poster.png" preload="auto">
        <source [src]="videoSource" type="video/mp4">
    </video>
    <vg-controls>
        <vg-play-pause></vg-play-pause>
        <vg-time-display vgProperty="current" vgFormat="mm:ss"></vg-time-display>
        <vg-scrub-bar></vg-scrub-bar>
        <vg-time-display vgProperty="total" vgFormat="mm:ss"></vg-time-display>
        <vg-mute></vg-mute>
        <vg-volume></vg-volume>
    </vg-controls>
    <vg-overlay-play></vg-overlay-play>
    <vg-buffering></vg-buffering>
</vg-player>

在上面的代码中，VgPlayer标签是ngx-videogular的核心标签，包裹在其中的video标签则是HTML5自带的视频标签。

在video标签中，我们通过[vgMedia]来指向我们video.js相关设置， [poster]属性则是在视频播放器加载视频前展示的图片，preload属性则指定浏览器在页面加载时预加载视频。

在VgControls标签内，我们定义了播放/暂停、时间进度、静音、音量等标签，这些标签由ngx-videogular插件提供。

在VgOverplayPlay和VgBuffering标签中，提供了播放覆盖层和缓冲音频，也都是由ngx-videogular插件提供的。

3.3 编写组件代码

现在我们需要在我们的组件代码中实现onPlayerReady和onUpdateTime这些方法。

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  media: any;
  videoSource = '../assets/sample.mp4';
  target: any;
  currentTime: any;
  onPlayerReady(api: VgAPI) {
    this.media = api.getDefaultMedia();
  }
  onUpdateTime(evt: any) {
    this.currentTime = evt.target.currentTime;
  }
}

在上面的代码中，我们定义了一个media对象和一个videoSource字符串，分别表示视频媒体和视频源。在方法onPlayerReady(api: VgAPI)中，我们完成了将VgAPI的媒体引用赋值给 media对象（api.getDefaultMedia()）。在onUpdateTime(event)方法中，我们可以获取当前时间戳。

4. 自定义视频播放器的控件

通过ngx-videogular，我们可以完美地实现视频播放器功能，但如果我们想要实现个性化的播放器UI，那么我们需要重新定义一些新控件，这些控件需要继承原来的控件以保留原有的功能，同时重写相关逻辑以实现新的UI效果。

4.1 在ngx-videogular插件中扩展控件

下面的示例代码展示了如何扩展ngx-videogular的控键：

import {Component, ElementRef, Input} from '@angular/core';
import {VgScrubBar} from 'ngx-videogular';
@Component({
  selector: 'custom-scrub-bar',
  template: `<div class="scrub-bar" tabindex="0">
                  <ng-content></ng-content>
               </div>`,
  styleUrls: ['./custom-scrub-bar.component.css']
})
export class CustomScrubBarComponent extends VgScrubBar {
  @Input() name: string;
}

在上面的代码中，我们创建了一个名为CustomScrubBarComponent的组件，它继承了ngx-videogular的VgScrubBar控件。我们也不需要重新编写父类中的代码，否则就失去了扩展的意义.

4.2 在HTML页面中使用控件

我们扩展控件之后，在HTML文件中就可以像下面这样使用了：

<vg-player class="video-player">
  <video [vgMedia]="media" [poster]="../assets/poster.png" preload="auto">
        <source [src]="videoSource" type="video/mp4">
  </video>
  <custom-scrub-bar vgFor="my-video" vgSlider="false" name="foo"></custom-scrub-bar>
  <vg-controls>
    <vg-play-pause></vg-play-pause>
    <vg-time-display vgProperty="current" vgFormat="mm:ss"></vg-time-display>
    <vg-time-display vgProperty="total" vgFormat="mm:ss"></vg-time-display>
    <vg-mute></vg-mute>
    <vg-volume></vg-volume>
  </vg-controls>
  <vg-overlay-play></vg-overlay-play>
  <vg-buffering></vg-buffering>
</vg-player>

在HTML文件中，我们可以直接使用 <custom-scrub-bar> 标签，并设置name属性值，就像使用普通控件一样方便而简单。

5. 总结

通过本文的实现，我们在Angular中已经完成了自定义视频播放器的操作，您可以根据所需的样式和功能扩展相应的插件控件，结合HTML5和video.js的特性，您将会得到一个优秀的视频播放器。

Angular中怎么自定义视频播放器