使用Videogular构建Angular视频播放器

本文概述

• 什么是Videogular？
• Videogular如何工作？
• 如何安装Videogular
• 创建一个Angular视频播放器
• 在Angular中建立媒体播放列表
• 使用VgAPI处理状态
• 下一步是什么？

Videogular项目受srcmini开源资助的支持。 srcmini Open Source Grants支持srcmini网络成员从事开源项目。

作为首批获得开放源代码资助的人之一, Raul Jimenez Herrando正在为Videogular项目添加新功能, 修复错误并编写文档。要了解有关srcmini开源赠款的更多信息, 请发送电子邮件[受电子邮件保护]

根据在线流量统计, 视频正在接管网络的控制。老式电视已经一去不复返了, 公司正迅速占领这个市场, 该市场到2019年将占在线流量的80％。

许多媒体提供商和产品都依赖HTML5视频支持：

• YouTube：HTML5视频和社交共享平台
• Netflix：HTML5视频内容提供商
• JWPlayer：HTML5视频服务和流提供程序
• Brightcove：HTML5视频服务和流媒体提供商
• Kaltura：HTML5视频服务和流媒体提供商
• Video.js：HTML5视频播放器
• Flowplayer：HTML5视频播放器和流提供程序

开发人员社区需要一个坚实, 可扩展和高级的媒体框架(不仅仅是HTML5视频播放器)来应对即将出现的新挑战。在本文中, 我想介绍一个这样的框架：Videogular。

什么是Videogular？

顾名思义, Videogular是用Angular 2+编写的媒体框架。使用Videogular, 你可以播放HTML5视频, 音频或所需的任何其他内容。 Angular 1.X(也称为AngularJS)有一个实现, 但是在本文中, 我们将仅讨论当前的Angular 2+版本。

因此, 你可能会想到的下一个问题是：为什么将Angular用于视频？

嗯, 选择一个特定的框架来创建视频库有很多充分的理由。

• 易于贡献：由于Videogular基于Angular, 这是一个非常活跃的社区流行框架, 因此其他人很容易通过创建插件或修正错误来开始贡献。
• Web组件：无需编写JavaScript即可创建和设置自己的播放器样式。你可以编写HTML和CSS代码。
• TypeScript：Angular是一个类型化框架, 以及周围的所有库。拥有强类型的生态系统可以让我们在为时已晚之前发现错误和架构问题。
• 速度：包括Angular在内的所有最新流行框架都在快速发展。

此外, 我们还有其他一些很酷的功能, 例如RxJS, AOT(提前编译), Angular CLI等。

Videogular如何工作？

我想说, Videogular不仅仅是HTML5视频播放器, 更是一种媒体框架。其他视频播放器之间最相关的功能和区别是, 你编写代码来设置播放器而不是JavaScript。

现在大多数视频播放器的工作方式如下：

<video class="library" controls preload="auto" data-config="some-js-object-here">
  <source src="video-url.mp4" type='video/mp4'>
</video>
 
<script src="video-library.js"></script>

这是Videogular实现的样子：

<vg-player>
   <vg-overlay-play></vg-overlay-play>
   <vg-buffering></vg-buffering>
 
   <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-current-time></vg-scrub-bar-current-time>
          <vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time>
       </vg-scrub-bar>
 
       <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 #myMedia [vgMedia]="myMedia" id="myVideo" preload="auto" crossorigin>
       <source src="video-url.mp4" type='video/mp4'>
       <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>

Videogular的好处是, 只需快速浏览一下HTML代码, 就可以知道该播放器的工作方式, 可用的控件以及如何对其进行修改以删除它们, 例如轨道和轨道选择器。

但这不是我们在构建Angular视频播放器时可以受益的唯一优势。想想大型开发团队, 其中HTML / CSS设计师和JavaScript开发人员在同一代码库上一起工作。由于我们使用的是自定义元素, 因此设计人员可以通过应用样式和动画开始工作, 而无需学习新的库甚至JavaScript / TypeScript。

而且, Videogular提供的功能比仅仅编写普通的Angular视频播放器要强大得多, 例如几个媒体文件之间的自动同步, 或者不仅可以播放视频/音频, 而且还可以播放任何具有开头和结尾的内容。

为了了解使用Videogular创建丰富的交互式应用程序有多么容易, 我们将创建带有同步元数据的视频播放列表。

如何安装Videogular

在此示例中, 我们将提供视频列表以及Wikipedia的相关摘录, 以防万一用户需要有关视频的更多信息。

所有代码均可在我们的Videogular Showroom GitHub存储库中找到, 并作为GitHub页面发布。

Videogular安装对于任何熟练的Angular开发人员来说都是一件容易的事情。另一方面, 如果你刚刚开始使用Angular, 则应该查看此快速指南以制作第一个Angular应用。

如果尚未安装Node.js, 请访问Node.js官方网站并进行安装。这是我们唯一需要使用Angular开发的服务器, 并且我们需要它通过NPM安装依赖项。你只需要确保安装Node.js 6.9.0或更高版本以及NPM 3.0.0或更高版本即可。

我们需要做的第一件事是安装Angular CLI。 Angular CLI是任何Angular开发人员必备的工具, 因为它提供了简便的脚手架, 测试, 开发服务器和生产版本。更重要的是, 它遵循任何其他Angular开发人员都可以理解的约定。

通过NPM全局安装Angular CLI：

npm install -g @angular/cli

让我们创建第一个支持SASS的项目：

ng new smart-video-playlist --style=scss

这应该为你创建一个示例项目。如果要同时开始开发并观察结果, 则可以运行npm run start并打开[http：// localhost：4200](http：// localhost：4200)。 Angular CLI将运行具有实时重载功能以及开发人员喜欢的所有出色功能的Node.js开发服务器。

现在, 你可以安装videogular2库和core-js类型：

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

创建一个Angular视频播放器

如果需要, 可以使用正式的Videogular字体在按钮和控件上设置图标。为此, 你需要将CSS添加到项目根目录中的.angular-cli.json文件中。

{
   ...
   "apps": [
       {
           ...
           "styles": [
               "../node_modules/videogular2/fonts/videogular.css", "styles.scss"
           ], ...
       }
   ], ...
}

如果要设置自己的字体和样式, 则可以在此处或在styles.scss中设置自定义CSS。

要在你的项目中开始使用Videogular, 你必须将Videogular模块添加到你的应用程序模块中。

打开src / app / app.module.ts并删除FormsModule和HttpModule；在此演示中, 我们将不需要它们。这是你的app.module.ts文件应为的样子：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
 
import { AppComponent } from './app.component';
import { VgCoreModule } from 'videogular2/core';
import { VgControlsModule } from 'videogular2/controls';
 
@NgModule({
   declarations: [
       AppComponent
   ], imports: [
       BrowserModule, VgCoreModule, VgControlsModule
   ], providers: [], bootstrap: [ AppComponent ]
})
export class AppModule {
}

完成所有设置后, 我们只需要编写HTML代码即可！

<vg-player>
   <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>
           <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
           <vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time>
       </vg-scrub-bar>
 
       <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" id="singleVideo" preload="auto" crossorigin>
       <source src="http://static.videogular.com/assets/videos/videogular.mp4" type="video/mp4">
   </video>
</vg-player>

现在, 你可以运行服务器并享受第一个由Angular和Videogular支持的视频应用程序。

npm run start

在Angular中建立媒体播放列表

要列出我们的视频, 我们将创建一个包含所有选项的简单数组。请记住, 你可以使用Angular的HttpModule通过REST服务加载此列表, 但为简单起见, 我们将在此演示中对此进行硬编码。

打开app.component.ts并添加以下视频数组及其界面：

import { Component } from '@angular/core';
 
export interface IMedia {
   title: string;
   src: string;
   type: string;
}
 
@Component({
   selector: 'app-root', templateUrl: './app.component.html', styleUrls: [ './app.component.scss' ]
})
export class AppComponent {
   playlist: Array<IMedia> = [
       {
           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'
       }
   ];
}

现在, 我们准备在HTML文件中的播放器下方添加播放列表：

<ul>
   <li *ngFor="let item of playlist; let $index = index"
       (click)="onClickPlaylistItem(item, $index)"
       [class.selected]="item === currentItem">
       {{ item.title }}
   </li>
</ul>

让我们为选定的类和悬停效果添加一些样式：

ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
   font-family: sans-serif;
 
   li {
       padding: 10px;
       cursor: pointer;
 
       &.selected {
           background-color: #dddddd;
       }
 
       &:hover {
           background-color: #cce6ee;
       }
   }
}

onClickPlaylistItem方法将设置要在我们的Videogular播放器上播放的媒体。现在转到app.component.ts添加方法：

// ...
export class AppComponent {
   // ...
 
    currentIndex = 0;
    currentItem: IMedia = this.playlist[ this.currentIndex ];
 
    onClickPlaylistItem(item: IMedia) {
        this.currentIndex = index;
        this.currentItem = item;
    }
}

稍后将使用currentIndex属性来标识当前项目及其在播放列表中的位置。这对于执行无限循环播放列表和在用户单击播放列表的项目时更新currentIndex至关重要。

最后, 我们只需要修改video元素即可设置播放列表处理的currentItem属性的来源。为此, 我们将创建一个简单绑定到HTML5视频元素的src属性：

<video #media
      [vgMedia]="media"
      [src]="currentItem.src"
      id="singleVideo"
      preload="auto"
      crossorigin>
</video>

现在, 我们可以测试播放列表并查看其工作原理。第一个视频是在开始时加载的, 我们可以在视频之间进行切换, 所以一切都很好！但是我们可以做一些调整, 通过在视频播放完成后自动在视频之间切换来改善体验, 并更好地管理播放器状态。

为此, 我们将需要Videogular API, 这是每个Videogular实例上都可以使用的全局服务, 用于处理状态和侦听事件。

使用VgAPI处理状态

我们的媒体播放列表目前可以100％正常运行, 但是当选择了新项目或视频播放完毕时, 我们可以通过自动播放视频来改善用户体验。

Videogular公开了一个API, 用于控制和侦听VgPlayer组件中每个VgMedia实例的更改。实际上, 所有Videogular模块都基于此公共API, 因此你可以为客户创建自己的模块, 也可以通过将其发布为开源来为社区做出贡献。

要使用Videogular API, 你只需要侦听VgPlayer组件触发的onPlayerReady事件：

<vg-player (onPlayerReady)="onPlayerReady($event)">
// ...

初始化播放器后, 你可以保存API并开始侦听video标签分发的事件：

export class AppComponent {
   // ...
 
   onPlayerReady(api: VgAPI) {
       this.api = api;
   }
}

Videogular API基于RxJS, 因此你可以订阅Observables并作出反应。要自动播放视频, 我们需要侦听loadedmetadata事件。

让我们添加一个新的订阅, 以便在加载元数据时播放视频：

export class AppComponent {
   // ...
 
   onPlayerReady(api: VgAPI) {
       this.api = api;
       this.api.getDefaultMedia().subscriptions.loadedMetadata.subscribe(
           this.playVideo.bind(this)
       );
   }
 
   playVideo() {
      this.api.play();
   }
 
   // ...
}

那很简单;我们只需在可加载的metadata可观察性触发时通过VgAPI播放视频即可。

你还记得currentIndex属性吗？现在是时候使用它了, 我们可以在当前视频完成后移到下一个视频：

// ...
export class AppComponent {
   // ... 
   onPlayerReady(api: VgAPI) {
       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 ];
   }
 
   // ...
}

使用此方法, 我们可以处理视频标签何时触发了结束事件, 然后移至下一个视频。我们还通过设置currentIndex = 0, 添加了一个小的控件来在播放列表的末尾进行无限循环；因此我们可以移回第一项。最后, 我们设置currentItem, 它将更新UI中的Angular绑定。

如你所见, 我们不在这里播放视频；那是因为我们使用可观察到的loadMetadata处理该问题。当我们在nextVideo()中更新currentItem时, 将加载一个新视频, 并触发可观察到的loadedMetadata。

这使我们的代码更易于阅读, 更难破解！可观察的东西很棒吗？

下一步是什么？

从这里, 我们可以添加一些HTML5视频控件, 以删除自动播放或无限循环, 注入广告或同步信息。

在此演示中, 我们只是介绍了Videogular可能做的事情。该API能够同时管理多个媒体文件, 我们具有用于流媒体和广告的模块, 你甚至可以创建媒体播放器来播放动画, 地图中的路线等。

Videogular是在MIT许可下发布的, 是GitHub上的一个开源项目。欢迎每个人创建请求请求, 提交问题, 编写文档并为社区做出贡献。