Brightcove 和 Video.js 已将 videojs-vr 插件作为一流插件采用。它现已发布，并支持 Video.js 6！

它从何而来？

这个插件历史悠久，拥有众多维护者。它最初是 slawrence/videojs-vr。之后它变成了 metacdn/videojs-vr。然后 StreamShark.io、Brightcove 和 HapYak 之间进行了私人合作。最终我们决定将此插件作为一流公民对待。因此我们将其更新至 高级插件 API，修复了一些长期存在的问题，在此过程中记录了其他问题，并将其移至 Video.js 组织。

您如何判断视频是 360/VR 视频？

在桌面播放器上

在非浏览器环境中，这个问题很容易回答，因为有一个普遍接受的标准。视频本身应包含元数据，指示该视频是 360/VR 视频以及如何显示。然而，即使在浏览器之外，这也有点棘手，因为大多数程序（甚至 ffmpeg）都不支持插入此元数据。事实上，许多程序会剥离这些元数据，因为它们认为其无效。这就是名为 Spatial Media Metadata Injector 的项目发挥作用。Spatial Media Metadata Injector 将 360/VR 元数据注入视频中，而不会改变其他任何内容。这使得 VLC 等播放器能够识别视频是 360/VR 视频。

videojs-vr 是如何做到的？

浏览器没有在 API 中公开视频元数据，因此我们必须自行解析，但这并不是一个可行的选项。所以在 videojs-vr 中，我们有一个 projection 选项，可以在插件初始化期间传入。

projection 的第一个也是默认设置为 'AUTO'。将 projection 设置为 'AUTO' 会告诉 videojs-vr 查找 player.mediainfo.projection。player.mediainfo.projection 必须由某个外部插件/脚本设置，该插件/脚本由服务器告知当前视频是 360/VR 视频。视频的 player.mediainfo.projection 可以是以下任何一种：

• '360', 'Sphere', 或 'equirectangular'：视频是球体
• 'Cube' 或 '360_CUBE'：视频是立方体
• 'NONE'：此视频不是 360 视频，videojs-vr 插件应不执行任何操作。如果不存在投影，则无需设置，因为会默认如此。
• '360_LR'：用于并排 360 视频
• '360_TB'：用于上下 360 视频

否则，projection 可以在插件初始化时手动设置为上述任何值。然后可以为每个视频以不同的设置来处理和重新初始化插件。

在我们知道视频是 360/VR 后会发生什么？

使用当前的投影值，我们确定需要在我们的 three.js 画布上显示什么。然后我们使用（通过 webvr-polyfill 或真实的 VRDisplay API）进行填充以设置控件。如果设备连接了 VIVE、Oculus 等，我们就使用它们。如果没有，则以 360 度模式显示视频，其中鼠标/键盘/加速度计控制视频。在移动设备上还有一个进入纸板模式的按钮，该模式会将视频显示为由一条线分隔的两个较小的视频。这样就可以使用伪 VR 头戴设备（如 Google Cardboard）和手机观看视频。视频播放时，我们使用动画帧来动画 three.js 画布上的 VideoTexture。这使我们能够根据用户输入的控件显示视频的正确部分。

为什么它这么大？

我们都同意这个插件很大，但由于所有浏览器都不原生支持 VRDisplay API，我们必须在项目中包含许多大型依赖项。大小主要来自于以下几点：

1. [three.js](https://github.com/mrdoob/three.js) 用于创建 VR/360 画布，自行实现会很痛苦

2. [webvr-polyfill](https://github.com/googlevr/webvr-polyfill) 为当前不支持 VR 的浏览器（实验性标志和构建版本除外）提供 VR 功能的 polyfill

调试

来自 three.js 和 webvr 管理器（来自 webvr-boilerplate）的每个对象都可以在由 player.vr() 返回的 VR 插件实例上使用。

已知问题

• 同一页面上的多个播放器将共享控制，在一个视频中平移也会影响另一个视频。

未来

• 实现播放器级别的控制而非窗口级别的控制。这将允许根据当前焦点单独控制每个视频。
• 提供一个菜单，以便可以使用多个 VR 显示器，而不仅仅是我们找到的第一个。

查看代码、提交问题、建议功能或提交 PR

查看 GitHub 仓库 videojs-vr