如何使用VideoJS在上显示360视频

Question

我想用360视频播放器创建一个页面，所以当我点击play时，我需要能够移动视频并旋转360来查看所有内容。

所以我用HTML创建了视频源，并安装了来自npm的视频vr、视频player和vidoejs全景播放器。

<video id="videojs-panorama-player" class="video-js vjs-default-skin" crossorigin="anonymous" controls width="1000">
  <source src="Ayutthaya.mp4" type='video/mp4'>
</video>

现在我可以在页面上看到视频，如果我单击play，视频正在播放，但不做360。

我有一个有角度的应用程序，所以我想我应该通过打字代码来做一些事情，但是呢？

Answer 1

这听起来像VideoJS和视频video插件不知道你的视频是一个360视频。

这是360视频的一个常见问题，因为有不同的方式来表示视频在视频元数据中是360，而并不是视频管道中的所有元素都知道并保存这些元素。

VideoJS在他们的博客文章https://blog.videojs.com/videojs-vr-now-under-the-video-js-org/中有一些关于这方面的信息。

与您相关的部分可能是以下摘录：

浏览器不会在API中公开视频元数据，因此我们必须自己解析它，这实际上不是一个选项。因此，在视频passed中，我们有一个投影选项，可以在插件初始化过程中传递。

投影的第一个和默认设置是“自动”。将投影设置为“AUTO”，告诉视频tells查看player.mediainfo.projection。player.mediainfo.projection必须由一些外部插件/脚本设置，服务器告诉它当前的视频是360/VR。视频的player.mediainfo.projection可以是以下任一内容：

• ' 360 '，'Sphere'，或‘等长线’：视频是一个球形
• ‘立方体’或‘360_立方体’：视频是一个立方体
• ‘NONE’：这个视频不是360视频，视频video插件什么都不应该做。如果没有投影exists.
• '360_LR'：用于并行360视频' 360 _TB'：用于自上而下的360视频

，则不必设置这一设置。

否则，投影可以在插件初始化时手动设置为上述任何一个值。然后，可以对每个具有不同设置的视频进行处理和重新初始化。

对于您的情况，它可能是值得尝试的设置手动设置，以找到一个设置，为您的视频工作。