Video.js 指南

这些指南涵盖了 Video.js 用户的各种主题

播放技术（“技术”）

播放技术是指用于播放视频或音频的特定浏览器或插件技术。当使用 HTML5 时，播放技术是视频或音频元素。当使用 videojs-youtube 技术时，播放技术是 YouTube 播放器。该技术还包括一个 API 封装器，用于在 Video.js 控件和 API 与所使用的特定播放技术之间进行转换。

本质上，我们仅将 HTML5 和插件用作视频解码器，并使用 HTML 和 JavaScript 为所有这些技术创建一致的 API 和换肤体验。

除了技术之外，还有源处理器。源处理器为技术添加了播放额外源类型的能力。例如，http-streaming 源处理器（Video.js 7+ 默认包含）使 HTML5 技术能够播放 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

添加播放技术

当添加额外技术时，它们会自动添加到 techOrder 中。你可以修改 techOrder 以更改每种技术的优先级。

标签方法

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

对象方法

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

海报

默认情况下，技术必须自行处理海报，并且在某种程度上被排除在播放器的海报生命周期之外。然而，当播放器使用 techCanOverridePoster 选项初始化时，技术将能够集成到该生命周期中，并使用播放器的 PosterImage 组件。

技术可以通过检查其选项中的 canOverridePoster 布尔值来判断是否具备此能力。

techCanOverridePoster 要求

poster() 返回当前技术的视频海报 URL
setPoster() 更新技术的视频海报 URL 并触发 posterchange 事件，播放器将处理该事件

技术排序

当 Video.js 获得一组源时，使用哪个源取决于找到第一个受支持的源/技术组合。将按照 techOrder 中指定的顺序查询每种技术，以判断其是否可以播放第一个源。第一个匹配项胜出。如果没有技术可以播放第一个源，则会测试下一个源。为了使此测试准确，正确设置每个源的 type 非常重要。

这些示例使用已过时的 Flash 技术，以说明技术排序在能够播放的源方面具有更大重叠的技术中的应用

例如，给定以下视频元素，假设 videojs-flash 技术可用

<!-- "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 源将首先被测试。第一个技术是 HTML5。

Safari 可以在标准 HTML5 视频元素中播放 HLS，因此 HLS 将使用 HTML5 技术播放。
Chrome 无法在标准 HTML5 视频元素中独立播放 HLS，但 http-streaming 源处理器（Video.js 7+ 默认包含）可以通过 HTML5 中的 Media Source Extensions 播放 HLS。因此，HLS 将在 HTML5 技术中播放。
IE 10 无法原生播放 HLS，并且不支持 Media Source Extensions。由于源无法在 HTML5 中播放，将测试 Flash 技术。

现在再次使用相同的源，但没有 videojs-flash

<!-- "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 视频元素中播放 HLS，因此 HLS 将使用 HTML5 技术播放。
Chrome 将在 HTML5 技术中，通过 Media Source Extensions 使用 http-streaming 源处理器播放 HLS。
IE 10 无法在 HTML5 或 Flash 技术中播放 HLS。接下来将测试 MP4 源。MP4 可以由 HTML5 播放，因此将使用该源-技术对。

Flash 技术

Flash 已不再受支持，因为它已达到生命周期结束。

Videojs.com