How to integrate krpano virtual tour video plugin in angular 2 project

Question

I need to implement krpano virtual tour plugin for 360 videos, I have downloaded the js files, SWF files, XML file and added in HTML.js, XML and SWF files are not loading, I am not getting any error while executing project video playing as a normal HTML video. Can anyone help me for achieving this?

Thanks in advance.

here is my html file,

<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>

Answer 1

While your implementation of the krpano player is correct, you are misunderstanding the way, you interact with it.

Krpano uses XML data to generate its content. In your case, it is the assets/krpanoVT.xml. There you have to integrate the videoplayer plugin from krpano and the url to your videofile.

The documentation of the plugin is found at https://krpano.com/plugins/videoplayer/.

An working example with XML code could be found at https://krpano.com/video/

If you are planning to interact with krpano more dynamically, you should read the documentation of the javascript interface on the webpage of krpano.