如何在 Angular 2 项目中集成 krpano 虚拟旅游视频插件答案

【问题标题】：How to integrate krpano virtual tour video plugin in angular 2 project如何在 Angular 2 项目中集成 krpano 虚拟旅游视频插件
【发布时间】：2018-01-17 16:33:19
【问题描述】：

我需要为 360 视频实现 krpano 虚拟游览插件，我已经下载了 js 文件、SWF 文件、XML 文件并添加到 HTML.js 中，XML 和 SWF 文件没有加载，执行时我没有收到任何错误项目视频作为普通 HTML 视频播放。谁能帮我实现这个目标？

提前致谢。

这是我的 html 文件，

<script src="../assets/videoplayer.js"></script>
 <script src="../assets/videoplayer_basic_source.js"></script>
<script>
  embedpano({swf:"assets/krpano.swf", 
  xml:"assets/krpanoVt.xml",
  target:"pano", html5:'auto',passQueryParameters:true});
</script>

    <div id='loader' class='loading'></div>
    <div id="panocontainer">
      <div id="pano" style="width:100%; height:100%; position: absolute;">
        <video id="videojs-panorama-player" class="video-js vjs-default-skin"  
          crossorigin="anonymous" controls preload="none">
        <source src="https://yanwsh.github.io/videojs-panorama/assets/shark.mp4" 
         type='video/mp4'/>
     </video>
   </div>
</div>

【问题讨论】：

标签： html angular krpano

【解决方案1】：

虽然您对 krpano 播放器的实现是正确的，但您误解了与它交互的方式。

Krpano 使用 XML 数据来生成其内容。在您的情况下，它是assets/krpanoVT.xml。在那里，您必须将 krpano 中的视频播放器插件和 url 集成到您的视频文件中。

插件的文档位于https://krpano.com/plugins/videoplayer/。

可以在https://krpano.com/video/找到一个使用 XML 代码的工作示例

如果您打算更动态地与 krpano 交互，您应该阅读 krpano 网页上的 javascript 接口文档。

【讨论】：