来源：Demuxed 2021 主讲人：Steve Heffernan 内容整理：张一炜 本次演讲介绍一个基于网络流媒体播放器的新架构，该架构解耦了播放引擎与用户界面元素的实现，明确地将播放器实现中的关注点分开，同时为广泛的视频开发者社区建立一个新的开放生态系统。
目录
- 播放器的历史发展
- 解耦流媒体模块与 UI 模块
- 标准化 video API
- 扩展 video API
- 简化 UI 架构
- Demo 展示
播放器的历史发展
在上世纪初，常见的播放器是一个 RealPlayer 或 Quicktime 浏览器插件。但我们无法对这些播放器进行一些定制操作，比如 UI（用户界面）。这些播放器实际上是一个黑箱。
后来，视频播放器变成了 JavaScript 库的形式，可以在 flash 和 HTML5 之间灵活切换。但由于浏览器的限制，仍然无法做到让 flash 也像 Video tag API 一样。因此播放器为了兼容不得不针对 flash 构建这些属性与框架以使得系统的 UI 可以在 flash 和 HTML5 之间灵活的切换。
近年来，出现了一些新的技术如 Web Components, 它使得构建一个 HTML tag 以显示出与 video tag API 相同的属性成为可能。这意味着播放器的 UI 可以被单独的加载进来，并使得开发者可以更容易的构建各式各样的 UI。
解耦流媒体模块与 UI 模块
播放器中的流媒体模块与其 UI 模块解耦，意味着可以根据不同的上下文环境, 在相同的媒体元素下交换来选择不同的 UI，并且所有与流媒体有关的元素都可以在同时完成切换。同样，也可以在一个相同的播放器 UI 中切换流媒体元素，比如在 JWPLAYER 中切换得到 YouTube 的流媒体源。这使得构建一个灵活开放的网络视频生态系统成为可能，可以避免不同的开发者在构建播放器时进行一些重复性的工作。为此需要对 video API 进行一些标准化和扩展工作。
标准化 video API
以一个网页上的视频播放器为例，包含了很多的停止当前视频播放的按钮，如下图所示。
包含 stop 函数的部分
图中的每一个链接都需要通过调用 stop 函数来实现停止对当前视频的播放。对于标准化来说，stop 函数只是一个简单的例子，其他大量与流媒体播放相关的操作都需要对其形式和内容进行标准化实现。这样在构建播放器时就不需要重复实现这些函数，或者使用不同的名字来定义相同的操作。
扩展 video API
这一部分主要包括了播放质量的选择与插入广告方面的扩展。这也是目前的 video tag API 中亟需解决的。这部分的扩展并不需要对整个系统进行改动，而是需要在 video tag API 中对 UI 模块暴露一些函数以使得 UI 可以通过这些函数与用户的操作进行交互。这部分的扩展工作的复杂度并不算高。
目前关于 video API 的扩展已经在 Github 的 video-dev/media-ui-extensions 上进行了一些实验。
简化 UI 架构
目前的播放器实现中，是通过点击 paly-button 后向对应的流媒体元素直接发送请求，随后保持监听并等待流媒体元素返回对应的事件来实现。
事实上，在这一部分添加一个在 UI 与流媒体元素之间的控制器要更为合理一些。如下图所示。
在 UI 与流媒体元素之间添加控制器
这样，对于 UI 来说，就不需要单独向流媒体元素发送请求与监听返回的事件，由中间的 media-controller 来完成请求的发送，并对流媒体元素进行检查，返回给 UI 部分对应的状态。这样使得 UI 在实现时可以忽略事件的影响，并且只需要检查 media-controller 的状态即可。
这样的实现架构可以极大的简化 UI 部分的实现难度。并且通过这种方式可以使 UI 部分与流媒体元素之间的交互更加通用，避免对这部分交互逻辑的重复实现。也使得不同的 UI 实现方式的共享性得到提高。控制器集中了 UI 与 流媒体元素的交互逻辑，这种情况下 UI 开发者也不需要去花费心思考虑如何使用流媒体元素相关的内容，也使得 UI 模块可以方便的实现同时对多个视频流的控制。
虽然 HTML 中曾经有过 media-controller 概念的相关实现，但过去由于使用的人较少， 目前该功能已经被弃用。演讲者也表示会在 JavaScript 中实现这部分的功能。
Demo 展示
目前该项目实现的 demo 在 Github 的 muxinc/media-chrome 中，演讲者也展示了一些具体的例子。下图展示了对播放按钮的 UI 定义。可以看出在该框架下对于播放的定义非常简单。
播放按钮定义
将定义好的播放按钮放入到 media-controller 中即可以实现对视频播放的控制，如下图所示。并且对于 UI 部分来说，无需关心与流媒体元素之间的交互操作，只需要根据 media-controller 返回的状态来显示不同的 UI 即可。
media-controller 与 UI
另外，通过定义不同的视频源元素，可以轻松的实现对不同视频源的切换和控制。下图的demo 中展示了从 hls video 到 Youtube Video 的切换。
视频源切换
最后附上演讲视频：
http://mpvideo.qpic.cn/0bc3ceabwaaajyaea3bdgrrfaeoddmiqagya.f10002.mp4?dis_k=041146e96694d49b88b964b847bc5c35&dis_t=1649675052&vid=wxv_2296667470411431938&format_id=10002&support_redirect=0&mmversion=false
