Videojs.com

Video.js 指南

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

返回指南

常见问题

目录

问：Video.js 是什么？

Video.js 是一个围绕原生视频元素的可扩展框架/库。它具有以下功能：

  • 提供插件 API，以便将不同类型的视频交给原生视频元素处理（例如 HLS、HTML5 视频等）。
  • 统一跨浏览器的原生视频 API（必要时为功能提供 Polyfill 支持）
  • 提供可扩展和可主题化的 UI
  • 确保键盘和屏幕阅读器用户的可访问性
  • 拥有一套核心插件，支持更多视频格式
  • 通过核心插件支持 DRM 视频
  • 可与大量提供各种功能支持的插件进行扩展。请参阅 videojs.com 上的插件列表

问：如何安装 Video.js？

目前，可以通过 npm 安装 Video.js，从 GitHub 标签提供发布文件，甚至使用 CDN 托管版本。有关这些操作的信息，请参阅设置指南。

问：Video.js 支持 Bower 吗？

Video.js 6 之前的版本支持 bower，但是，从 Video.js 6 开始，不再官方支持 bower。有关更多信息，请参阅问题 #4012。

问：Video.js 的版本号是什么意思？

Video.js 遵循语义化版本控制 (semver)，这意味着除非主版本号增加，否则 API 不应在用户不知情的情况下更改。

问：如何排除播放问题？

请参阅故障排除指南。如果故障排除未能解决您的问题，请在 Slack 中提问或提交问题。

寻求播放问题帮助时，问题通常与使用的视频文件、视频托管方式或浏览器有关，因此请务必包含所有这些信息和一个简化测试用例。

问：视频无法在特定浏览器中播放。为什么？

请参阅故障排除指南。如果故障排除未能解决您的问题，请在 Slack 中提问或提交问题。

问：为什么视频会在播放前完全下载？为什么视频加载时间很长？

请参阅故障排除指南。如果故障排除未能解决您的问题，请在 Slack 中提问或提交问题。

问：我看到了一个提到 vdata12345 的错误。那是什么？

请参阅故障排除指南。如果故障排除未能解决您的问题，请在 Slack 中提问或提交问题。

问：我发现 Video.js 有 Bug，或者我想添加一个新功能。我该怎么做？

如果您认为可以修复此问题或添加此功能

非常欢迎在 Video.js 仓库中提交拉取请求。请务必遵循贡献指南和拉取请求模板。

如果您认为无法修复此问题或添加此功能

在 Video.js 仓库中提交问题。请务必遵循问题模板和贡献指南，以便我们更好地协助您解决问题。

问：什么是简化测试用例？

简化测试用例是您所面临问题的独立示例。可以将其视为一个用最少代码量重现问题的示例页面。

添加简化用例很重要。即使问题看起来很明显，对其他人来说可能并非如此。有一个可供参考的示例，也能让其他人能够立即发现问题所在，而不是需要时间来重现他们认为您正在描述的问题。

我们有一个简化测试用例入门示例。要了解有关简化测试用例的更多信息，请访问css-tricks。

问：Video.js 支持哪些媒体格式？

这取决于浏览器 HTML5 视频元素支持的格式，以及 Video.js 可用的播放技术/插件。有关媒体格式的更多信息，请参阅故障排除指南。

问：Video.js 如何选择使用哪个源？

当有多个源可用时，Video.js 会按照给定顺序测试每个源。对于每个源，techOrder 中的每个技术都会被检查，以确定它是否可以直接播放或通过源处理程序（例如 videojs-http-streaming）播放。将选择第一个匹配项。

问：如何自动播放视频？

由于自动播放行为的近期变化，我们不再建议在 video 元素上使用 autoplay 属性。Video.js 仍支持该属性，但包括 Chrome 在内的许多浏览器正在改变其 autoplay 属性行为。

相反，我们建议使用 autoplay 选项而不是 autoplay 属性。有关使用该选项的更多信息，请参阅 Video.js 选项指南中的自动播放选项。

有关自动播放更改的更多信息，请参阅我们的博客文章。

问：如何在移动设备上自动播放视频？

直到最近，大多数移动设备都阻止自动播放视频。对于不支持自动播放的移动设备，Video.js 也不支持自动播放。对于支持自动播放的设备，例如 iOS10 和 Android 版 Chrome 53+，您必须将视频静音或使用不含音轨的视频才能播放。

我们不建议在 video 元素上通过属性手动执行此操作。相反，您应该传递 autoplay 选项，其值为 'any' 或 'muted'。有关使用该选项的更多信息，请参阅上一链接。

注意：目前，autoplay 属性和选项并不能保证您的视频会自动播放。

问：如何在 Video.js 中播放 RTMP 视频？

由于 RTMP 需要 Flash，而 Flash 已停止支持，因此不再可能播放 RTMP。没有浏览器支持它。

问：如何隐藏我的视频/字幕/音频/轨道的链接？

无法隐藏浏览器发出的网络请求，也难以充分混淆源代码中的 URL。令牌认证等技术可能会有所帮助，但这超出了 Video.js 的范围。

对于必须高度安全的内容，videojs-contrib-eme 增加了 DRM 支持。

问：我可以关闭 Video.js 日志吗？

可以！在包含 Video.js 之后，但在创建任何播放器之前添加以下代码即可实现：

videojs.log.level('off');

有关更多信息，包括可用的日志级别，请查阅调试指南。

问：什么是插件？

插件是一组可重复使用的功能，可以被其他人重复利用。例如，一个插件可以向 Video.js 添加一个按钮，使视频在最终停止播放之前连续重播 10 次。如果存在并发布了这样的插件，用户可以在其页面中包含它以共享该功能。

问：如何为 Video.js 制作插件？

有关为 Video.js 制作插件的信息，请参阅插件指南。

问：如何向 Video.js 添加按钮？

有关向 Video.js 添加按钮的示例，请参阅组件指南。

问：在哪里可以找到 Video.js 插件列表？

在 npm 上发布并带有 videojs-plugin 关键字的插件列表可在 videojs.com 上找到。

问：如何将我的插件列入网站列表？

将“videojs-plugin”关键字添加到您的 package.json 文件中的数组，并将您的包发布到 npm。如果您使用插件生成器，这将自动为您完成。有关更多信息，请参阅插件指南。

问：在哪里可以找到 Video.js 皮肤列表？

请参阅Video.js GitHub Wiki。

问：Video.js 可以作为纯音频播放器使用吗？

可以！它可以在 <video> 或 <audio> 标签中用于播放纯音频文件。

问：Video.js 支持音轨吗？

可以！有关使用音轨的信息，请参阅音轨指南。

问：Video.js 支持视频轨吗？

备用视频轨支持正在开发中。有关使用视频轨的更多信息，请参阅视频轨指南。

问：Video.js 支持文本轨道（字幕、旁白等）吗？

可以！有关使用文本轨道的信息，请参阅文本轨道指南。

问：Video.js 支持 HLS（HTTP Live Streaming）视频吗？

Video.js 支持 HLS。如果 HTML5 元素支持 HLS（例如 Safari、iOS、旧版 Edge 或 Android 版 Chrome），它将使用原生支持进行播放。在其他浏览器上，它将使用我们的播放引擎 videojs-http-streaming 进行播放。

请注意，对于非原生 HLS 播放，视频托管服务器必须设置CORS 头。

问：Video.js 支持 MPEG DASH 视频吗？

Video.js 通过我们的播放引擎 videojs-http-streaming 提供对某些 DASH 流的支持。

另外，可以使用 videojs-contrib-dash 包。

与 HLS 类似，DASH 流需要CORS 头。

问：Video.js 支持直播视频吗？

是的！常见的直播格式是 HLS 或 DASH。过去 RTMP 常用于直播，但现在已无法在任何浏览器中播放。

问：Video.js 可以播放 YouTube 视频吗？

有一个官方插件增加了支持，即 videojs-youtube。

问：Video.js 可以播放 Vimeo 视频吗？

有一个官方插件增加了支持，即 videojs-vimeo。

问：Video.js 支持 DRM 视频吗？

有一个官方插件增加了支持，即 videojs-contrib-eme。

问：Video.js 支持广告集成吗？

有一个官方插件增加了核心广告支持，即 videojs-contrib-ads。其他插件在此基础上构建，用于处理与广告服务器的通信和广告显示，例如Google 的 IMA 插件。

问：Video.js 可以在 Node.js 中使用 require 吗？

是的！Video.js 已发布到 NPM。

问：Video.js 兼容 Webpack 吗？

是的！请参阅Webpack 和 Video.js 配置指南。

问：Video.js 兼容 React 吗？

是的！请参阅ReactJS 集成示例。

问：大播放按钮可以居中显示吗？

默认皮肤将按钮偏移，以避免遮挡海报图像，但只需向播放器添加 vjs-big-play-centered 类即可使其居中。

问：暂停时可以显示大播放按钮吗？

向播放器添加 vjs-show-big-play-button-on-pause 类即可在暂停时显示按钮。

问：为什么 Firefox 中的画中画按钮不同？

Firefox 不支持 HTML 视频画中画 (PIP) API，因此无法在 Video.js 控件中设置自定义按钮。Firefox 有自己的覆盖式 PIP 按钮，以及自己的显示逻辑。