如何使用VideoJS在Angular应用程序上显示360视频

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

所以我用HTML创建了视频源，并从npm安装了videojs、videojs vr和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>

我现在可以在页面上看到视频，如果我单击“播放”，则视频正在播放，但不是360度播放。

---

我有一个角度应用程序，所以我想我应该通过typescript代码做些什么，但是什么呢？

听起来像VideoJS，VideoJS vr插件不知道你的视频是360视频

这是360视频的一个常见问题，因为在视频元数据中有不同的方式来表示视频是360，并且视频管道中的所有元素都不会意识到并保留这些内容

VideoJS在他们的一篇博客文章中有一些关于这方面的信息-

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

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

投影的第一个默认设置是“自动”。将投影设置为“自动”会告诉videojs vr查看player.mediainfo.projection。player.mediainfo.projection必须由服务器告知当前视频为360/VR的外部插件/脚本进行设置。视频的player.mediainfo.projection可以是以下任意一种：

• “360”、“球体”或“等矩形”：视频是球体
• “立方体”或“360_立方体”：视频是一个立方体
• “无”：此视频不是360视频，videojs vr插件不应执行任何操作。如果不存在投影，则不必设置该值
• “360_LR”：用于并行360视频 “360_TB”：用于从上到下的360视频

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

---

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

请查看自述说明中的“逐源传递投影”部分：