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

Posted 2023-04-18

【中文标题】如何使用 VideoJS 在 Angular App 上显示 360 度视频

【英文标题】：How to use VideoJS to show 360 video on Angular App

【发布时间】：2020-09-01 13:22:02

【问题描述】：

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

所以我在 html 中创建了视频源，并从 npm 安装了 videojs、videojs-vr 和vidoejs-panorama-player。

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

我现在可以在页面上看到视频，如果我点击播放，视频正在播放，但不是 360。 我有一个角度应用程序，所以我想我应该通过打字稿代码做一些事情，但是什么？

【参考方案1】：

听起来像 VideoJS，而 videojs-vr 插件不知道您的视频是 360 度视频。

这是 360 度视频的常见问题，因为在视频元数据中有不同的方式来表明视频是 360 度，并且并非视频管道中的所有元素都会知道并保留这些。

VideoJS 在他们的一篇博文中提供了一些相关信息 - https://blog.videojs.com/videojs-vr-now-under-the-video-js-org/

与您相关的部分可能是这段摘录：

浏览器不会在 API 中公开视频元数据，因此我们必须自己解析它，这不是一个真正的选择。所以在 videojs-vr 中我们有一个投影选项，可以在插件初始化期间传入。

投影的第一个默认设置是“自动”。将投影设置为“自动”告诉 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 度视频

否则，可以在插件初始化时手动将投影设置为上述任何值。然后可以使用不同的设置为每个视频释放和重新初始化插件。

对于您的情况，可能值得尝试手动设置投影以找到适合您的视频的设置。

【讨论】：

查看 README 说明中的“逐个源地传递投影”部分：github.com/videojs/…