Video: What's Inside an HTML5 Player?
Streamroot的Erica Beavers着眼于像Brightcove等著名HTML5玩家的内部工作原理和UI元素, Ooyala, JWPlayer, and Bitdash, and how they differ from their Flash predecessors, 以下是她在2016年流媒体西部大会上的演讲摘录.
Learn more about streaming players at Streaming Media East.
Read the complete transcript of this clip:
Erica Beavers: When we really thought about it, 我们得出了一个非常简单的结论，即HTML5播放器与你最喜欢的汉堡并无太大区别. 这个类比非常贴切，因为HTML5提供了一个更加灵活的框架. 我们正越来越远离黑盒子式的flash技术，进入一个你能想象到的世界, you can most likely build it.
What exactly is involved in an HTML5 player? The first, the most upper part of the player, 播放器的高级部分是面向用户的部分这就是我们所说的用户界面. 这是由玩家的皮肤组成的，也就是玩家本身的设计. To that, 我们可以添加任何类型的业务逻辑特性，比如支付, authentication, any sort of ads. Then finally in that layer, 我们有任何定制的用户界面功能，围绕着玩家, such as playlists and social sharing, etc.
然后我们进入视频播放器的“肉”部分，你的媒体引擎. 这将处理所有的回放逻辑, such as your manifest parsing, 检索视频片段和所有自适应比特率规则. 我们选择汉堡的肉来做这个部分并不是偶然的, 因为这可能是玩家最重要的部分. 重要的是不要忽视这一部分，因为如果你的媒体引擎不是很好, your entire player is going to be subpar. 你可以在上面放任何东西来掩盖它，但你不可能真正地掩盖它. 它通常是视频播放器中被忽视的一部分，但它是最重要的一部分.
Then finally on the bottom layer, we have everything that takes care of decrypting, decoding and rendering the segments on the screen. There we have the DRM manager, 内容解密模块实际上是嵌入到浏览器中的, then the decoder and the render. 让我们更详细地看看这些.
First, 我们显然有用户界面，这是你可以用你的品牌标识来定制的一切. First, 我们有一个皮肤，它显然可以包括一个控制条, buttons, animations, any sort of icons etc. Then next we have all of our UI logic, 在简单的播放之上定义与视频播放器交互的功能. 我们有，这些可以包括播放列表栏，缩略图，频道选择，社交分享等. 如果你使用像Video这样的解决方案，很多这些的好处是.例如，其中许多已经作为插件存在，您可以将其添加到UI核心中. If you take a look at the example of Video.Js中有很多不同的插件你可以在你的播放器上安装.
我们以Eurosport Player为例，它实际上有一些很酷的东西, 切换回直播，你可以一边看直播一边赶上进度, and very easily switch between the two of them. HTML5与flash的一大不同之处在于，只需要几行代码和媒体引擎就可以轻松实现这一点. 你可以有几个播放器实例在同一个播放器中有两个不同的视频, very easily.
用户界面的第三个组成部分我们称之为业务逻辑. This includes anything like, as I said, authentication, payment, any type of ad service that you might be using. An addition to these three, perhaps the most important one on this, is actually your, what we call, your configuration logic. 能够检测用户的设备并相应地配置用户体验对你来说是非常重要的.
What's nice is with HTML5, 你通常能够非常简单地用CSS和JavaScript开发所有UI功能, 然后能够在你所有的设备上重复使用它们以获得无缝的用户体验. Even if what you have underneath your media engine, underneath might differ from platform to platform. 这是HTML5中能够分离实际播放逻辑和UI逻辑的优点之一.
Related Articles
Viacom的Dan Balis研究了当前在线视频播放器和平台的主要功能和特点，以帮助用户在Flash消亡后迁移到新播放器时做出明智的选择.
09 Feb 2017
迪士尼的Mark Arana和Wowza的Chris Knowlton讨论了内容所有者在将视频从Flash迁移到HTML5时所面临的挑战, 在计划迁徙策略之前，知道视频会在哪里播出是很重要的.
02 Jan 2017
Streamroot的Nikolay Rodionov向观众介绍了在开发过程中测试视频播放器的有效A/B测试工作流程的关键要素.
19 Dec 2016
Streamroot的Erica Beavers解释了什么是A/B测试，以及它如何使构建自定义视频流播放器的组织受益.
15 Dec 2016