简介

在本Angular教程中，我们将学习如何在Angular 10/9应用程序中嵌入视频播放器以播放视频, 并支持使用 ngx-videogular 包定制的播放列表和视频支付控件。HTML 5的视频播放器提供了许多选项来创建许多现代浏览器都支持的自定义播放器。我们可以根据需要轻松地使用视频标签属性来创建视频播放器。

对于小于Angular 9的版本，您可以使用Videogular2软件包，但对于最新的Angular 9+ 版本，则需要使用新的ngx-videogular软件包。这些ngx-videogular依赖包使用HTML 5视频播放器, 为使用者提供易于使用和令人激动的布局，从而使视频嵌入非常快速。使用此功能, ngx-videogular 提供许多必需的功能, 例如：

• 播放列表控件。
• 音频播放器支持。
• 同一屏幕上有多个玩家。
• 速度控制选项。
• 播放器中的实时媒体流。

创建一个新的Angular应用

运行一下ng命令创建新的Angular应用

$ ng new angular-video-player-app
# ? Would you like to add Angular routing? Yes
# ? Which stylesheet format would you like to use? SCSS

进入项目目录

$ cd angular-video-player-app

运行应用程序

$ ng serve --open

安装ngx-videogular组件

运行以下命令安装ngx-videogular软件包

$ npm install ngx-videogular --save

导入Icon和style

更新angular.json文件中的样式数组

...
"build": {
    ...
    "styles": [
      "./node_modules/@videogular/ngx-videogular/fonts/videogular.css",
      "src/styles.scss"
    ],
    "scripts": []
  },
  ...
},
...

更新应用程序模块

想要使用Videogular2组件，我们将导入所需的模块。大约有四个模块, 但是您可以根据应用程序要 求导入。

打开app.module.ts文件并更新，如下所示：

// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { VgCoreModule, } from '@videogular/ngx-videogular/core';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
?
    VgCoreModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

简单的视频播放器

要创建一个简单的视频播放器, 请添加 <vg-player>带有 <video>和[ngMedia]="media" 指令的HTML 5标签的组件。

在<video>标记内，定义视频文件的 <source/> 。

<div class="player-wrapper">
    <h3>Simple Video Player</h3>
    <vg-player>
      <video #media [vgMedia]="media" id="singleVideo" preload="auto" controls>
        <source src="http://static.videogular.com/assets/videos/videogular.mp4" type="video/mp4">
        <source src="http://static.videogular.com/assets/videos/videogular.ogg" type="video/ogg">
        <source src="http://static.videogular.com/assets/videos/videogular.webm" type="video/webm">
      </video>
    </vg-player>
  </div>

这将创建一个简单的视频播放器，具体如下：

具有自定义控件和图标的视频播放器

Videogular视频播放器通过添加各种组件来支持自定义播放器控件，例如速度控制，状态，播放/暂停按钮, 视频缓冲区和播放栏，静音和音量按钮。

导入模块

要使用这些组件，我们需要在app.module.ts文件中导入 VgControlsModule、VgOverlayPlayModule 、VgBufferingModule模块。

// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { VgCoreModule, } from '@videogular/ngx-videogular/core';
?
import { VgControlsModule } from '@videogular/ngx-videogular/controls';
import { VgOverlayPlayModule } from '@videogular/ngx-videogular/overlay-play';
import { VgBufferingModule } from '@videogular/ngx-videogular/buffering';
?
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
?
    VgCoreModule,
    VgControlsModule,
    VgOverlayPlayModule,
    VgBufferingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

更新组件模块

在应用程序组件模板中，添加以下组件以呈现视频播放器自定义控件

<div class="player-wrapper">
?
    <h3>Video Player with Controls</h3>
?
    <vg-player>
      <vg-overlay-play></vg-overlay-play>
      <vg-buffering></vg-buffering>
?
      <vg-scrub-bar>
        <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
        <vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time>
      </vg-scrub-bar>
?
      <vg-controls>
        <vg-play-pause></vg-play-pause>
        <vg-playback-button></vg-playback-button>
?
        <vg-time-display vgProperty="current" vgFormat="mm:ss"></vg-time-display>
?
        <vg-scrub-bar style="pointer-events: none;"></vg-scrub-bar>
?
        <vg-time-display vgProperty="left" vgFormat="mm:ss"></vg-time-display>
        <vg-time-display vgProperty="total" vgFormat="mm:ss"></vg-time-display>
?
        <vg-track-selector></vg-track-selector>
        <vg-mute></vg-mute>
        <vg-volume></vg-volume>
?
        <vg-fullscreen></vg-fullscreen>
      </vg-controls>
?
      <video #media [vgMedia]="media" id="singleVideo" preload="auto">
        <source src="http://static.videogular.com/assets/videos/videogular.mp4" type="video/mp4">
        <source src="http://static.videogular.com/assets/videos/videogular.ogg" type="video/ogg">
        <source src="http://static.videogular.com/assets/videos/videogular.webm" type="video/webm">
?
        <track kind="subtitles" label="English" src="assets/subs/pale-blue-dot.vtt" srclang="en" default>
        <track kind="subtitles" label="Espa?ol" src="assets/subs/pale-blue-dot-es.vtt" srclang="es">
?
      </video>
    </vg-player>
?
  </div>

这将宣染具有自定义图标和播放器布局的视频播放器.

具有智能控制和播放列表的视频播放器

播放器下添加事件侦析器和播放列表。

<div class="player-wrapper">
?
    <vg-player (onPlayerReady)="onPlayerReady($event)">
      <vg-overlay-play></vg-overlay-play>
      <vg-buffering></vg-buffering>
?
      <vg-scrub-bar>
        <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
        <vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time>
      </vg-scrub-bar>
?
      <vg-controls>
        <vg-play-pause></vg-play-pause>
        <vg-playback-button></vg-playback-button>
        <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-fullscreen></vg-fullscreen>
      </vg-controls>
?
      <video #media [vgMedia]="media" [src]="currentItem.src" id="singleVideo" preload="auto" crossorigin>
      </video>
    </vg-player>
?
    <ul>
      <li class="playlist-item" *ngFor="let item of playlist; let $index = index"
        (click)="onClickPlaylistItem(item, $index)" [class.selected]="item === currentItem">
        {{ item.title }}
      </li>
    </ul>
  </div>

使用播放列表对象和播放器方法更新类组件

import { Component } from '@angular/core';
?
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  name = "Angular";
  playlist = [
    {
      title: 'Pale Blue Dot',
      src: 'http://static.videogular.com/assets/videos/videogular.mp4',
      type: 'video/mp4'
    },
    {
      title: 'Big Buck Bunny',
      src: 'http://static.videogular.com/assets/videos/big_buck_bunny_720p_h264.mov',
      type: 'video/mp4'
    },
    {
      title: 'Elephants Dream',
      src: 'http://static.videogular.com/assets/videos/elephants-dream.mp4',
      type: 'video/mp4'
    }
  ];
?
  currentIndex = 0;
  currentItem = this.playlist[this.currentIndex];
  api;
?
  constructor() {
  }
?
  onPlayerReady(api) {
    this.api = api;
    this.api.getDefaultMedia().subscriptions.loadedMetadata.subscribe(this.playVideo.bind(this));
    this.api.getDefaultMedia().subscriptions.ended.subscribe(this.nextVideo.bind(this));
  }
?
  nextVideo() {
    this.currentIndex++;
    if (this.currentIndex === this.playlist.length) {
      this.currentIndex = 0;
    }
    this.currentItem = this.playlist[this.currentIndex];
  }
?
  playVideo() {
    this.api.play();
  }
?
  onClickPlaylistItem(item, index: number) {
    this.currentIndex = index;
    this.currentItem = item;
  }
}

为播放列表添加SCSS样式, 并将 selected类添加到当前视频中。

.player-wrapper {
    max-width: 500px;
    margin: auto;
?
    video {
        width: 100%;
    }
}
ul {
    padding: 0px;
?
    li.playlist-item {
        padding: 10px;
        list-style: none;
        background: #e6e6e6;
        margin-bottom: 2px;
        cursor: pointer;
    }
?
    li.playlist-item.selected {
        background-color: #ccc;
    }
}

具有播放列表的播放器如下所示：

结论

使用ngx-videogular包在Angular 10/9应用程序中实现视频播放器如此简单。有许多选项和组件可以修改视频播放器的行为。

参考

https://github.com/sliceofbytes/ngx-videogular