videojs
HLS 360 - CORS - Your browser/device not supported
Description
Doesn't work on any mobile browser, but works on Desktop OSX Chrome and Windows Chrome
Include a reduced test case.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link
href="https://unpkg.com/video.js/dist/video-js.css"
rel="stylesheet"
/>
</head>
<body>
<video-js id="my_video_1" class="vjs-default-skin" controls> </video-js>
<script src="https://unpkg.com/video.js/dist/video.js"></script>
<script src="./dist/videojs-vr.js"></script>
<script>
var player = videojs("my_video_1");
player.src({
src: "/myStream.m3u8",
type: "application/x-mpegURL",
withCredentials: true,
});
if (!player.mediainfo) {
player.mediainfo = {};
}
if (!player.mediainfo.projection) {
player.mediainfo.projection = "360";
}
player.vr({ projection: "AUTO" });
</script>
</body>
</html>
Steps to reproduce
Explain in detail the exact steps necessary to reproduce the issue.
- Open on mobile phone with any browser
Results
Expected
Expected to see 360 HLS stream on Gear VR(Samsung S7, Samsung S10), Oculus Go, Mobile Chrome, like I do on desktop
Actual
Getting error message "Your browser/device does not support HLS 360 video. See http://webvr.info for assistance
Error output
video.js:84 VIDEOJS: ERROR: (CODE:web-vr-hls-cors-not-supported undefined) Your browser/device does not support HLS 360 video. See http://webvr.info for assistance. MediaError {code: "web-vr-hls-cors-not-supported", message: "Your browser/device does not support HLS 360 video. See http://webvr.info for assistance."}
Additional Information
Please include any additional information necessary here. Including the following:
versions
videojs
7.7.5
browsers
Chrome 81, Oculus browser, Samsung Internet 11.1.2.2
OSes
Android
Have a link to your stream? It sounds like it doesn't have CORS enabled, so, I would recommend making sure that's available. See https://enable-cors.org/
I'm experiencing the same thing with HLS/360 streams.
CORS is enabled (ran into another, similar issue, throwing the same CORS error on Desktop/Chrome, but I fixed it with adding the attribute crossorigin="anonymous" on the video tag itself after verifying CORS was enabled on my google bucket).
First noticed on an actual Samsung Note 10, confirmed in Browserstack across all Android/Chrome devices I've tried. The video still plays within the video tag and reacts to controls + api commands like play and pause, but it's only the flat video (i.e. the video isn't getting applied as a texture to the THREE object for 3d panning).
All Android/Firefox devices I've tried in Browserstack not only don't show the error on screen, but also don't show the video, even though it seems the video is still there and reacts to api commands and generating video events.
It simply does not work (see #106 or #198) but definitely worked before.
IMHO some policy change took place in Chrome for Android which disallows to place textures on objects when streaming content, i.e. hls or dash. My wild guess is that the crossorigin setting simply applies to the video content so setting it on a manifest would have no effect, see my comment in #106. But that's just a guess.
However it can be done somehow - see nsfw-related tube sites. With videojs-vr only <video> with a video-source works fine while <video> with a manifest does not work anymore.
I have the same issue. It works on browser (Windows; Chrome, Firefox & Opera all work fine on desktop).
Does not work on iPhone 7 Plus. Get the following error:
"The media playback was aborted due to a corruption problem or because the media used features your browser did...."
Here's the link: https://www.webmasterinabox.net/browse-button-test-56/
@tmadison-gpsw Did you manage to resolve the above error , I am facing the same issue, Thank you in advance
Add property: crossorigin="anonymous" to HTML video tag, work for me.
@gkatsev can you probably update videojs or videojs-vr plugin in a way so I don't have to add crossorigin="anonymous" to HTML video tag? I didn't dig in much, but I faced same problem... adding crossorigin property to video tag fixes the problem, but it looks as a hack and I don't really know why I need to do that update.
I checked your solution for Brightcove https://player.support.brightcove.com/plugins/360degvr-video-plugin.html and it works without adding crossorigin="anonymous" even when the video source is requested from different domain, so maybe I am just missing something? Thanks!
For the reference, here is player example with VR 360 at Codepen https://codepen.io/brootle/pen/oNMYEWJ
