使用 Videogular 构建 Angular 视频播放器

根据在线流量统计，视频正在接管网络。 好的老式电视正在消亡，公司正在迅速占领一个到 2019 年将占在线流量 80% 的市场。

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

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

开发者社区需要一个可靠的、可扩展的、先进的媒体框架（不仅仅是一个 HTML5 视频播放器）来应对未来的新挑战。 在本文中，我想介绍一个这样的框架： 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" 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="Espanol" 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

在这个例子中，我们将有一个视频列表和一个来自维基百科的相关摘录，以防用户需要更多关于视频的信息。

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

对于任何熟练的 Angular 开发人员来说，Videogular 安装应该是一件简单的事情。 另一方面，如果你刚刚开始使用 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" 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>

让我们为selected的类和hover效果添加一些样式：

 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" 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，因此您可以subscribe Observables并做出相应的反应。 要自动播放视频，我们需要监听loadedmetadata事件。

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

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

那很简单; 当loadedMetadata可观察对象被触发时，我们只需通过 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 ]; } // ... }

使用此方法，我们可以处理video标签触发ended事件的时间，然后移动到下一个视频。 我们还添加了一个小控件，当我们通过设置currentIndex = 0; 所以我们可以回到第一个项目。 最后，我们设置currentItem来更新 UI 中的 Angular 绑定。

如您所见，我们不是在此处播放视频； 那是因为我们使用加载的loadedMetadata observable 来处理它。 当我们更新nextVideo()中的currentItem时，会加载一个新视频并触发loadedMetadata可观察对象。

这使我们的代码更容易阅读，更难破解！ Observables 很棒吧？

下一步是什么？

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

在这个演示中，我们只是触及了使用 Videogular 可以做的事情的皮毛。 该 API 能够同时管理多个媒体文件，我们有流媒体和广告模块，您甚至可以创建一个媒体播放器来播放动画、地图中的路线等等。

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