When attempting to load a 360 video the player is stuck at "loading"

[danb235]

I have followed the example for 360 video but find myself stuck with the following experience:

With the built in HTML5 video player the video plays fine:

Any ideas on why I am getting stuck on the loading screen? I am not seeing any errors, and I have confirmed videojs-pannellum-plugin.js is loading.

[mpetroff]

Without more information, I can't be of much help. Can you post your code?

[danb235]

I have since changed the code a little bit but am still running into similar behavior.

I am loading videojs via https://vjs.zencdn.net/5.11.7/video.js. I am currently loading videojs-pannellum-plugin.js locally. I have gotten 360 photos to load without issue (awesome by the way, great work!).

The app I am working with is written in BackboneJS. The video element has an id derived from the video files id this.model.get('id'). I am using your sample video (path stored in url) for sanity.

Below is some straightforward code where I am adding attributes to a empty video element. I am then passing the element to videojs.

var element, elementSource, url;

url = 'https://pannellum.org/images/video/jfk.webm';

element = document.getElementById("" + (this.model.get('id'));

element.classList.add("video-js");

element.classList.add("vjs-default-skin");

element.classList.add("vjs-big-play-centered");

elementSource = document.createElement('source');

elementSource.src = url;

elementSource.type = 'video/webm';

element.appendChild(elementSource);

videojs("" + (this.model.get('id')), {
  plugins: {
    pannellum: {}
  }
});

With this code I just get stuck at the loading screen:

If I remove the following the video plays in the built in html5 viewer:

videojs("" + (this.model.get('id')), {
  plugins: {
    pannellum: {}
  }
});

When the above code is removed this is what the video element looks like:

<video id="2158958359" width="1920" height="960" class="image imageWider imageTaller thinner active video-js vjs-default-skin vjs-big-play-centered"><source src="https://pannellum.org/images/video/jfk.webm" type="video/webm"></video>

Here is the element when videojs loads it:

<video id="2158958359_html5_api" class="vjs-tech imageWider imageTaller thinner" src="https://pannellum.org/images/video/jfk.webm" style="display: none;"><source src="https://pannellum.org/images/video/jfk.webm" type="video/webm"></video>

src="https://pannellum.org/images/video/jfk.webm" style="display: none;" looks weird to me... not sure if that is the issue though. Any ideas?

[danb235]

For reference, in your example this is the final video element:

<video id="panorama_html5_api" class="vjs-tech" preload="none" style="width: 100%; height: 400px; display: none;" poster="/images/video/jfk-poster.jpg" data-setup="{}" src="https://pannellum.org/images/video/jfk.webm">
<source src="https://pannellum.org/images/video/jfk.webm" type="video/webm">
<source src="https://pannellum.org/images/video/jfk.mp4" type="video/mp4">
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to
a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video>

[danb235]

After I posted the above code I was thinking there are too many variables to debug this properly. I went ahead and created a simple html file based on your example with videojs and pannellum both local. You can download this example project here:

https://www.dropbox.com/s/8tzaxllborweuqp/pannellum-example.zip

In this example I am running into the same behavior (stuck at loading). This time, however, I am seeing an error in the dev console:

You should be able to reproduce this by opening sample.html in the example project.

I am running macOS 10.12 and Chrome Version 53.0.2785.116 (64-bit).

[danb235]

I had another idea of using the html from your example page to see if I could get it to work locally as well. I ran into the same loading issue, but without the error in the dev console. Here is a new zip file with that project. The html file is sample2.html.

https://www.dropbox.com/s/hd5fr1f6lgu6afl/pannellum-example%202.zip?dl=0

Here is a gif of the behavior:

[mpetroff]

You're using the non-minified development JavaScript. When doing this, libpannellum.js needs to be included as well (they're combined into one file when the production copy is built). This is why you're getting a libpannellum is not defined error.

[danb235]

@mpetroff thanks for the feedback. In this attempt I used the minified pannellum.js which includes libpannellum.js.

I went ahead and simplified my example project even more just trying to get this to work. Here is what it contains:

• minified pannellum.js version 2.2.1 downloaded from https://pannellum.org/download/
• video.js version 5.4.6 which is identical to the example at https://pannellum.org/documentation/examples/video/
• videojs-pannellum-plugin.js latest master located at https://github.com/mpetroff/pannellum/blob/master/utils/video/videojs-pannellum-plugin.js
• using your sample videos and poster
• all scripts, css, and content are local to the html doc

Here is the HTML:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Pannellum Video Demo</title>
    <link rel="stylesheet" href="pannellum.css" />
    <script type="text/javascript" src="pannellum.js"></script>

    <link href="video-js.css" rel="stylesheet" type="text/css">
    <script src="video.js"></script>
    <script src="videojs-pannellum-plugin.js"></script>
</head>

<body>

    <video id="panorama" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="none" style="width:100%;height:400px;" poster="jfk-poster.jpg" data-setup="{}">
    <source src="jfk.webm" type="video/webm"/>
    <source src="jfk.mp4" type="video/mp4"/>
    <p class="vjs-no-js">
        To view this video please enable JavaScript, and consider upgrading to
        a web browser that <a href="http://videojs.com/html5-video-support/"
        target="_blank">supports HTML5 video</a>
    </p>
</video>

    <script>
        videojs('panorama', {
            plugins: {
                pannellum: {}
            }
        });
    </script>

</body>

</html>

I am still stuck with a loading screen. You can hear the audio though so the video is "playing".

Here is my example project in an archive:

https://www.dropbox.com/s/8tcx2ae8vzyisag/pannellum-example%203.zip

[danb235]

Alright the plot thickens. The example project in my last reply appears to be working in Safari. So here is what I am seeing:

I am running macOS Sierra 10.12.

• Safari Version 10.0 (12602.1.50.0.10) -- works
• Firefox Version 49.0 -- works
• Chrome Version 53.0.2785.143 (64-bit) -- stuck at loading

The odd thing is that with Chrome the example at https://pannellum.org/documentation/examples/video/ loads without issue.

[danb235]

I think I have hit a chrome bug. If I serve the example project with python's SimpleHTTPServer Chrome loads the 360 video just fine.

[mpetroff]

As I mention in the readme, a local web server should always be used. Otherwise, you end up dealing with the peculiarities of the local filesystem security restrictions of different browsers, with different things working in different browsers, as is the case here. What you describe as a Chrome bug is just Chrome's more restrictive security policy.

[danb235]

Understood. I think I am narrowing down the issue and appreciate your feedback.

So as I described above Pannellum is now working when running from a web server and all assets are local. If the source is not from the same origin I get the same "Loading" issue.

So continuing with my example, here is the video element in my sample.html doc:

<video id="panorama" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="none" style="width:100%;height:400px;" poster="jfk-poster.jpg" data-setup="{}">
    <source src="jfk.webm" type="video/webm"/>
    <source src="jfk.mp4" type="video/mp4"/>
    <p class="vjs-no-js">
        To view this video please enable JavaScript, and consider upgrading to
        a web browser that <a href="http://videojs.com/html5-video-support/"
        target="_blank">supports HTML5 video</a>
    </p>
</video>

I am using the python SimpleHTTPServer (python -m SimpleHTTPServer) for testing in this case. In the above example the video source is being served via http://localhost:8000/jfk.webm according to the dev console. This works great, 360 playback looks good.

If I modify the source of the video then I run into issues:

<video id="panorama" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="none" style="width:100%;height:400px;" poster="jfk-poster.jpg" data-setup="{}">
    <source src="https://pannellum.org/images/video/jfk.webm" type="video/webm"/>
    <source src="https://pannellum.org/images/video/jfk.mp4" type="video/mp4"/>
    <p class="vjs-no-js">
        To view this video please enable JavaScript, and consider upgrading to
        a web browser that <a href="http://videojs.com/html5-video-support/"
        target="_blank">supports HTML5 video</a>
    </p>
</video>

In the above example the source is https://pannellum.org/images/video/jfk.webm, this causes the visual portion of the video player to be stuck at the loading screen, meanwhile the video is "playing" because you can hear the audio. If I modify video.js to not load the Pannellum plugin, video playback is fine (of course minus the 360 support).

Here is the example project I am working out of with the video sources pointing to https://pannellum.org/images/video/ (when in the pannellum-example directory simply run python -m SimpleHTTPServer then go to http://localhost:8000/sample.html):

https://www.dropbox.com/s/mgmf0y9ij6ge41c/pannellum-example%204.zip

[danb235]

Digging further into this I used pannellum.js and libpannellum.js from https://github.com/mpetroff/pannellum/tree/master/src/js.

With the video element src is local it works fine like above. When I try using the externally hosted video I now see the following error in the dev console:

I am reading that as in order to load WebGL content it must come from the same source, which would explain why the 360 content won't load. Is this correct?

[mpetroff]

This is violating the browser's same-origin security policy, since a CORS header isn't being set. The video itself works fine, which is why the audio plays, since the same-origin policy only applies to JavaScript.

You need to add a crossorigin="anonymous" attribute to the <video> element, e.g. <video id="panorama" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="none" style="width:100%;height:400px;" poster="jfk-poster.jpg" data-setup="{}" crossorigin="anonymous">. I just updated the example to reflect this.

[danb235]

Thanks for the crossorigin="anonymous" -- this is working much better now!