Playback Technology (“Tech”)

Playback Technology 是指用于播放视频或音频的特定浏览器或插件技术。当使用 HTML5 时，Tech 是 video 或 audio 元素。当使用 videojs-youtube tech 时，Tech 是 YouTube 播放器。此外，Tech 还包含一个 API 包装器，用于转换在 Video.js 控件和 API 之间使用的特定播放技术。

本质上，我们只将 html5 和插件用作视频解码器，并使用 HTML 和 JavaScript 创建通用的 API 和皮肤体验。

除了 Tech，还有源处理器（source handlers）。源处理器向 Tech 播放其它 source types 的功能。例如， http-streaming 源处理器（默认情况下随 Video.js 7+ 提供）使 HTML5 Tech 可以播放 HLS 和 DASH。

构建 API 包装器

我们将尽快编写一个关于编写包装器的更完整的指南，但是目前最好的资源是 Video.js 源码，在这里您可以看到 HTML5 API 包装器是如何创建的。

必含方法

canPlayType、play、pause、currentTime、volume、duration、buffered、supportsFullScreen

必含事件

loadstart、play、pause、playing、ended、volumechange、durationchange、error

可选事件（如果支持）

timeupdate、progress、enterFullScreen、exitFullScreen

添加 Playback Technology

添加其它 Techs 后，它们将自动添加到 techOrder 中。您可以修改 techOrder 以修改每个 Tech 的优先级。

元素修改方式：

<video data-setup='{"techOrder": ["html5", "other supported tech"]}'>

对象修改方式：

videojs("videoID", {
  techOrder: ["html5", "other supported tech"]
});

Posters 海报

默认情况下，Techs 必须处理它们自己的 posters，并且在某种程度上被锁定在播放器的 poster 生命周期之外。但是，当播放器使用 techCanOverridePoseter 选项初始化时，Techs 将有可能集成到该生命周期中，并使用播放器的 PosterImage 组件。

Techs 可以通过检查选项中的 canOverridePoster 的布尔值，来确认它们是否具有此功能。

techCanOverridePoster 要求

poster() 返回 Tech 当前 poster 的 URL 地址
setPoster() 变更 Techs 的 poster URL 地址，并触发播放器将处理的 posterchange 事件

Technology 排序

当向 Video.js 提供一个 source 数组时，将通过查找第一个支持的 source / tech 组合来决定使用哪个 source。将按照 techOrder 中指定的顺序查询每个 Tech 是否可以播放第一个 source。选择第一个成功匹配的。如果没有 Tech 可以播放第一个 source，那么将测试下一个 source。正确设置每个 source 的 type 对于该测试的准确性非常重要。

这里的示例使用了过时的 Flash tech，用于说明如果使用 Tech 排序和可以播放的 sources 进行配对。

例如，给定以下 video 元素，假设 [videojs-flash][flash] tech 和 videojs-contrib-hls 源处理器可用：

译者：HLS 只支持 Safari 浏览器使用 HTML5 播放，其它浏览器可使用基于 Media Source Extensions 扩展的工具（如 videojs-contrib-hls）处理后播放，但不同浏览器对 Media Source Extensions 的兼容也不一样。

<!-- "techOrder": ["html5", "flash"] -->
<video
  <source src="http://your.static.provider.net/path/to/video.m3u8" type="application/x-mpegURL">
  <source src="http://your.static.provider.net/path/to/video.mp4" type="video/mp4">
</video>

首先校验 HLS source。第一个 Tech 是 html5：

Safari 可以在标准 HTML5 video 元素中播放 HLS，因此 HLS 将使用 HTML5 tech 播放。
Chrome 无法单独在标准 HTML5 vidoe 元素中播放 HLS，但 videojs-contrib-hls 源处理器可以通过 HTML5 的 Media Source Extensions 播放 HLS。因此 HLS 将在 HTML5 tech 中播放。
IE 10 原生无法播放 HLS，并且不支持 Media Source Extensions。由于无法使用 HTML5 播放 source，因此可以测试 Flash tech。videojs-contrib-hls 源处理器可以在 Flash tech 中播放 HLS，所以 HSL 将在 Flash tech 中播放。

现在，使用 videojs-contrib-hls，但不使用 videojs-flash，再次应用相同的 sources：

<!-- "techOrder": ["html5"] -->
<video
  <source src="http://your.static.provider.net/path/to/video.m3u8" type="application/x-mpegURL">
  <source src="http://your.static.provider.net/path/to/video.mp4" type="video/mp4">
</video>

Safari 将在 html5 tech 中播放
Chrome 将通过 videojs-contrib-hls 在 html5 tech 中播放 HLS
IE 10 无法在 html5 tech 或 Flash tech 中播放 HLS。接下来将测试 MP4 source。MP4 可以由 HTML5 播放，因此将使用这个 source-tech 组合。

这一次，我们使用 videojs-flash，但是不使用 not videojs-contrib-hls：

<!-- "techOrder": ["html5", "flash"] -->
<video
  <source src="http://your.static.provider.net/path/to/video.m3u8" type="application/x-mpegURL">
  <source src="http://your.static.provider.net/path/to/video.mp4" type="video/mp4">
</video>

Safari 将在 html5 tech 中播放
Chrome 无法在 html5 tech 或 flash tech 中播放 HLS，所以将在 html5 tech 中播放 MP4。
IE10 同样无法在 html5 tech 或 flash tech 中播放 HLS，并且会在 html5 tech 中播放 MP4

Flash Technology

Flash 已达到 end of life，不再支持。