videojs panorama not working correctly with videojs-contrib-hls(only sound)

[jeremy-st]

I am having the same issue as issue #27 except on the desktop(mac or windows) the video will play after letting it play once with only sound. On iOS and Android the video will never play, only sound. On Android the second attempt to play the loading circle will flash looking like a glitch. My video is not local, it is delivered via Wowza streaming engine.

[yanwsh]

Hello, could you download new code? https://github.com/yanwsh/videojs-panorama/tree/master/dist

I did some fix for hls video, could you help me test whether it works or not.

If not, could you set up a demo for me to test? Thank you.

[yanwsh]

Your video is served by Wowza, does that mean your video and html page is served on different server? If that's the case, the problem is cross domain. Browser don't allow cross domain for some reason. Currently solution only work on chrome but not working on safari. You have to set up cross domain header on Wowza, like Access-Control-Allow-Origin: *

[jeremy-st]

I tried the new code and it did not work. I will set up a test site that's public facing really quick and give you the url. Yes the video and html page is served on different servers. I have CORS enable and inspected the headers with fiddler to confirm so I do not believe thats the issue.

[jeremy-st]

Without iframe- http://videojs.daredevilbear.com/videojs/iphone

With iframe- http://videojs.daredevilbear.com/videojs/iframe

[rebotnix]

@jeremy-st , this is mp4, not hls, right?

I see in console this: texImage2D — three.js:31187SecurityError (DOM Exception 18): The operation is insecure.

To bring more light on HLS streaming issue in VR, please read this: https://github.com/mrdoob/three.js/issues/8110

I do not think that we can fix it for safari/ios yet.

Update: SEEN ON webkit bug list Apparently the CORS issue is fixed in Safari in macOS but the very latest updates. The inline video playback is also working in IOS.

Here is two tests on for mp4 streaming another for HLS. The HLS one requires extra work because of a separate bug with FlipY that is still a problem on OSX Safari.

HLS rendering on IOS 10 is displaying but has colour artifact issues. The frames stop working but I believe its an issue with the emulator and frames dropping. I now have no device that can be updated to IOS 10. It doesn't show up at all on IOS 9. Both require the CORS proxy for mp4 and HLS.

http://dev.electroteque.org/webgl/threejscors.html http://dev.electroteque.org/webgl/threejscors-hls.html

Now I'm stuck with a situation that the crossOrigin feature detection cannot be used because it reports of support in OSX 10.11 but there is no such thing.

I have to try and detect which OSX safari is used in also. very bad.

var testVideo = document.createElement("video"); testVideo.crossOrigin = "anonymous"; testVideo.hasAttribute("crossOrigin")

This used to work but now it doesn't. Safari in 10.10 / 10.11 Here is some Es6 from static utils to deal with the CORS detection problem. It has driven me over the edge. I know people have given up on Safari but people want and need this to work.

Both IOS 10 Safari and Yosemite Safari 10 report CORS feature detection but obviously do not, this was a recent sabotage in Safari 10.

Extra platform and version checks are required. This is rough as guts but I have no time or stomach to fine tune it further. If it doesn't support CORS the property should not be available as before.

I have to specifically check for both Safari and OSX 10.12 and above. This will break in the future of course.

static supportsCORS() { let testVideo = document.createElement("video"), hasCORS = false;

    testVideo.crossOrigin = "anonymous";
    hasCORS = testVideo.hasAttribute("crossOrigin");
    testVideo = null;

    if (hasCORS) {

        if (WebVRUtils.isSafari) {

            if (WebVRUtils.isIpad) return false;
            return WebVRUtils.isNewSafari;
        }

        return true;
    }

    return false;

}

static get isSafari() {
    const userAgent = navigator.userAgent;
    return (/Safari/i).test(userAgent) && !(/Chrome/i).test(userAgent);
}

static get isIpad() {
    const userAgent = navigator.userAgent;
    return (/iP(hone|od|ad)/i).test(userAgent);
}

static get isNewSafari() {
    const version = /Mac OS X (10[\.\_\d]+)/.exec(navigator.userAgent)[1].split("_")[1];
    return +version >= 12;
}

Confirmed this works as expected (bug fixed) when testing against the URL on this ticket using latest macOS Sierra 10.12.1 (16B2659) Safari Version 10.0.1 (12602.2.14.0.7).

Bug is still NOT fixed in Mobile Safari on iOS 10.2 Public Beta 3 (14C5077b). There is a newer Beta 4 available but I have not yet installed or tested.

[jeremy-st]

Okay I will look more into on 12/27 after the holiday break hopefully we can get a solution. I confirmed the bug still exist in the public release of iOS 10.2 on iPhone 7+ But I have not tested on the new macOS.

[danrossi]

Please check three.js ticket regarding to webkit bug and HLS. It's really nasty. I found a fix and others helped fine tune it.

Webkit and Apple don't care about the industry whatsoever. Only affects Safari not HLS.JS streaming on other browsers. Safari macOS still has CORS bugs with MediaSource based streaming ie Dash. The CORS bug isn't entirely fixed.

[jeremy-st]

Okay I will try the Cordova WebView wrapper.

[jeremy-st]

Wouldn't CORS affect the sound too and why does it take a pause of the video for video to show up in chrome on a windows desktop using HLS?

[danrossi]

Cordova is just to work around CORS issues in IOS9-10. The HLS rendering in Safari is completely different and more bizarre in IOS. It only works in IOS 10 after quite extensive changes.

[Llorito]

The problem persist in Mac 10.12.3 and Safari 10.0.3 (12602.4.8). I can hear the sound but the video is in black

[andy-mcdonald]

Did this issue ever get resolved? I'm still seeing the black screen / audio-only problem in Safari (MacOS and iOS) with the latest versions of videojs-panorama and videojs-contrib-hls plugins on npm. Has anyone managed to get it working?

My videos are being tested / hosted on the same domain so CORS should not be an issue. I noticed that the code in 0.1.5 version of videojs-panorama is slightly different that the latest version in the repo so I'm wondering whether that might be the problem. Also, since the bug seems to be related to THREE.js, would it be worth updating the dependency from r81 to r84?

[jeremy-st]

I have not tried in awhile but the last time I did I was still having the issue.

[gaglage]

The error persist

[bdibenedetto]

I've been able to see the video, adding

since to be hidden by default

.vjs-myplayer .vjs-tech { visibility: inherit !important; }