Just a Black Screen (But Can Hear Sound)

[casbboy]

I see the Panorama icon appearing in the tool bar, but no video is showing.

I'm testing it here:

https://www.traileraddict.com/the-conjuring-2/360-vr-experience-enfield

Seeing lots of errors from the three.js as well.

Anything I'm missing?

Cheers! Ryan

[casbboy]

I guess it's because my video is monoscopic? Does this plugin support that?

[yanwsh]

i can play the video because it shows video.js is undefined, please make sure you include video.js script. and let me know when it's done, i can test again.

[casbboy]

@yanwsh

I'm not having that issue in my console. But here is the errors that start once I hit play:

Here are the scripts being loaded:

  |   |   |   |   |   |   |   |

360-vr-experience-enfield:1 [.Offscreen-For-WebGL-0000019D1795F8E0]RENDER WARNING: there is no texture bound to the unit 0
360-vr-experience-enfield:1 [.Offscreen-For-WebGL-0000019D1795F8E0]RENDER WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering.
three.js:31187 DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The video element contains cross-origin data, and may not be loaded.
    at THREE.WebGLState.texImage2D (https://cdnjs.cloudflare.com/ajax/libs/three.js/r76/three.js:31183:18)
    at uploadTexture (https://cdnjs.cloudflare.com/ajax/libs/three.js/r76/three.js:27573:11)
    at THREE.WebGLRenderer.setTexture2D (https://cdnjs.cloudflare.com/ajax/libs/three.js/r76/three.js:27611:4)
    at SingleUniform.setValueT1 [as setValue] (https://cdnjs.cloudflare.com/ajax/libs/three.js/r76/three.js:31490:22)
    at Function.THREE.WebGLUniforms.WebGLUniforms.upload (https://cdnjs.cloudflare.com/ajax/libs/three.js/r76/three.js:31820:7)
    at setProgram (https://cdnjs.cloudflare.com/ajax/libs/three.js/r76/three.js:26727:24)
    at THREE.WebGLRenderer.renderBufferDirect (https://cdnjs.cloudflare.com/ajax/libs/three.js/r76/three.js:25522:17)
    at renderObjects (https://cdnjs.cloudflare.com/ajax/libs/three.js/r76/three.js:26289:11)
    at THREE.WebGLRenderer.render (https://cdnjs.cloudflare.com/ajax/libs/three.js/r76/three.js:26042:4)
    at constructor.render (https://www.traileraddict.com/videojs/videojs-panorama.v5.min.js:1:14609)

I tested the page in both browsers, I'm not getting that video.js error.

Cheers! Ryan

[casbboy]

Just to be safe, I have:

player.panorama({ clickAndDrag: true });

Run only after player.ready, ensures video js is up and running.

Cheers! Ryan

[casbboy]

@yanwsh - was seeing if had a chance to check on this.

[yanwsh]

sorry for the late reply, I only have time during the weekend.

According to the demo you provide, it contains cross domain video, which is not supported by current browser, you have three options to solve this problem,

1. add cross domain header to video source, which could support on desktop browser, chrome, firefox and safari don't have problem, but it doesn't support ios safari, you will still get black screen.
2. use iframe and make sure iframe and video on the same domain, you can bypass cross domain issue. i have a example, please click here and here to view.
3. use reverse proxy, make sure video and page on the same domain.

[casbboy]

The video can never be the same domain, as it comes from a CDN/Platform service.

The cross domain is only an issue with this plugin, but not VideoJS in general I'm guessing? The video works perfect without the plugin, just looks odd (monoscopic). lol.

Cheers! Ryan

[yanwsh]

I know, but browser rule only allow same domain video because of security reason. The easiest solution is options one which is possible to add a cross origin header at CDN platform. But it's not support ios safari.

My suggestion is do option three, which use reverse proxy, it supports live stream.

Play video and do 360 video is different story, 360 video need to get original video and process image at runtime, that's why it needs cross domain support.

[casbboy]

Damn. Okay. Was doing the 360 no issue with JWPlayer so was trying to see if still could work with VideoJS.

Wouldn't reverse proxy be a bandwidth issue? When doing 100TB in bandwidth I'm thinking that would just double it, right?

[yanwsh]

if you check jwplayer's demo, you can see they use cross domain for desktop and same domain for mobile.

And the cross domain video contain access-control-allow-origin header.

If you are worry about bandwidth, maybe use can do the same thing.

so for desktop, you can use cdn directly, but for mobile, use reverse proxy.

[yanwsh]

may be you can use iframe solution, which add a html page on cdn. So it will solve cross domain issue.

[casbboy]

Well, I was pulling videos from another CDN, and just using the player (JWPlayer).

I'm piggybacking the Vimeo CDN. Was using JWPlayer just for the player, and the 360 video would appear there.

So JWPlayer embedded on my domain, with video coming from elsewhere. So three domains at play.

[dinhtienvu]

@casbboy Can you tell me how to use Vimeo CDN and play it on iPhone iOS. I still black sreen on iOS