videojs-vr
videojs-vr copied to clipboard
videojs
Player won't load media on Android Chrome
Hi,
I'm trying to use videojs-vr and it works properly on iOS using Safari or any app with a WebView. But on Android it doesn't work on Chrome. Samsung browser works fine on a Galaxy S8.
Do I need to do some extra config aside from the default on examples?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>videojs-vr Demo</title>
<link href="css/video-js.css" rel="stylesheet">
<link href="css/videojs-vr.css" rel="stylesheet">
</head>
<body>
<video id="videojs-vr-player" class="video-js vjs-16-9 vjs-default-skin" controls>
<source src="vrvideo.mp4" type="video/mp4">
</video>
<script src="js/video.js"></script>
<script src="js/videojs-vr.js"></script>
<script>
(function(window, videojs) {
var player = window.player = videojs('videojs-vr-player');
player.mediainfo = player.mediainfo || {};
player.mediainfo.projection = '360';
// AUTO is the default and looks at mediainfo
var vr = window.vr = player.vr({projection: 'AUTO', debug: true, forceCardboard: false});
}(window, window.videojs));
</script>
</body>
</html>
I've just tried the example that's in the repo and it's working fine in Chrome. I'm on Chrome 67, what version of chrome are you using? Are you seeing any errors in the console?
The error screenshot you provided includes an error coming from videojs-panorama. Though, maybe it's just on the page but not initialized.
Would you be able to provide a live reduced test case for me to look at?
I have indeed provided a screenshot of a test with videojs-panorama. But the issue is the same with videojs-vr. I have actually tested it again on Chrome for Android and it works properly, but that is not the case with a Chrome WebView inside an app.
Live test case: http://cdn-static.rpc.com.br/interatividade/hotsites/teste003/index.html
So, just tried your example on two android devices I have, on my pixel 2 xl, it loaded just fine but on my nexus 9 (still Android 5) it didn't. On the N9 it won't even be able to play back the video directly when I go to it outside of the page.
Just tested it with the sample from repo. Works properly even on a webview: http://cdn-static.rpc.com.br/interatividade/hotsites/teste003/index2.html
On my device, when it didn't work, I didn't get any other errors in the console for some reason. Just the "media could not be loaded" error, using index2 it works fine.
Yeah, I would guess that the mp4 itself is formatted differently. Looking at ffprobe your video is h264 main profile but the eagle sample is h264 high profile, though, that shouldn't matter as main is supposedly recommended for greatest platform support. So, not sure what exactly about the media makes it wonky.
I've exported our video with same res and framerate as the eagle video, and it now works properly!
Only issue is that I can't toggle fullscreen on webview app. But that's probably something on our app. This can be closed now.
Awesome, glad you got it working. Yeah, it's possible that a high framerate or high resolution could cause issues for the decoders.
I am still getting this issue when trying to test with a mp4 served from s3. Works on desktop not on Pixel 2 XL was using HLS before but was getting HLS 360 is not supported on device/browser (latest chrome and android P beta). Has anyone run into issues like that?
Are you using https://github.com/videojs/http-streaming or https://github.com/videojs/videojs-contrib-hls ?
I'm working with HLS without problem, you have to use like this in you html page:
See the link: http://360play.pt
Best Regards
@FernandoJBCosta I went to 360play.pt on a pixel 2xl with latest chrome and got the same error I'm getting:
Very strange Works on Samsung s6 and s7 with native browser. I have an iOS, iPad and Mac Safari, woks to.
This issue is still present on samsung 8 + chrome 70.0.3538.110. I'm using video.js 7.3.0 + videojs-vr.
I get the message :
Your browser/device does not support HLS 360 video. See http://webvr.info for assistance.
@FernandoJBCosta None of the videos at 360play.pt work for me on an S7 - neither with latest Chrome, latest Chrome Beta nor Samsung Browser. When have you last tested it? To me it seems like a changed policy in Chrome because we once got HLS working with Google's "VR View" but realized it does not work anymore. Now I wanted to replace the deprecated "VR View" with videojs-vr and experienced the same issue.
These are my CORS headers (Wowza default):
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: Content-Type, User-Agent, If-Modified-Since, Cache-Control, Range
Access-Control-Allow-Methods: OPTIONS, GET, POST, HEAD
Access-Control-Allow-Origin: *
Access-Control-Expose-Headers: Date, Server, Content-Type, Content-Length
When debugging in Chrome I see the request to the playlist is done and afterwards the web-vr-hls-cors-not-supported error shows up. However the first frame of the video is shown on the screen despite not showing up in Network tab of Chrome's DevTools. Who is requesting the chunklist and the TS file then? I also did a tcpdump which you can find below (Note: Host header was removed).
So in my understanding this issue should not be a CORS one because data is requested just fine. However I do not quite understand how it should work at all. If WebVR requires a crossorigin setting for its textures and this is set to the <video> containing the <source> with the manifest URL do we not just allow the viewer to display the manifest? Does the crossorigin setting allow WebVR implicitly to also use the downloaded TS as texture? This is what I think how it should work but obviously it doesn't. :(
The tcpdump mentioned above:
GET /vod/test/p.m3u8 HTTP/1.1
allow-cross-domain-redirect: false
User-Agent: Mozilla/5.0 (Linux; Android 8.0.0; SM-G930F) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.157 Mobile Safari/537.36
Connection: Keep-Alive
Accept-Encoding: gzip
HTTP/1.1 200 OK
Accept-Ranges: bytes
Access-Control-Expose-Headers: Date, Server, Content-Type, Content-Length
Server: WowzaStreamingEngine/4.7.6
Cache-Control: no-cache
Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: OPTIONS, GET, POST, HEAD
Access-Control-Allow-Headers: Content-Type, User-Agent, If-Modified-Since, Cache-Control, Range
Date: Wed, 26 Jun 2019 09:32:19 GMT
Content-Type: application/vnd.apple.mpegurl
Content-Length: 304
#EXTM3U
#EXT-X-VERSION:3
#EXT-X-STREAM-INF:BANDWIDTH=1473536,RESOLUTION=2024x1012
chunklist_w1513279074_b1473536.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=2908160,RESOLUTION=3840x1920
chunklist_w1513279074_b2908160.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=5031936,RESOLUTION=3840x1920
chunklist_w1513279074_b5031936.m3u8
------------------------------------
GET /vod/test/chunklist_w1513279074_b1473536.m3u8 HTTP/1.1
allow-cross-domain-redirect: false
User-Agent: Mozilla/5.0 (Linux; Android 8.0.0; SM-G930F) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.157 Mobile Safari/537.36
Connection: Keep-Alive
Accept-Encoding: gzip
HTTP/1.1 200 OK
Accept-Ranges: bytes
Access-Control-Expose-Headers: Date, Server, Content-Type, Content-Length
Server: WowzaStreamingEngine/4.7.6
Cache-Control: no-cache
Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: OPTIONS, GET, POST, HEAD
Access-Control-Allow-Headers: Content-Type, User-Agent, If-Modified-Since, Cache-Control, Range
Date: Wed, 26 Jun 2019 09:32:19 GMT
Content-Type: application/vnd.apple.mpegurl
Content-Length: 4028
#EXTM3U
#EXT-X-VERSION:3
#EXT-X-TARGETDURATION:15
#EXT-X-MEDIA-SEQUENCE:0
#EXTINF:15.0,
media_w1513279074_b1473536_0.ts
[...]
#EXTINF:5.093,
media_w1513279074_b1473536_83.ts
#EXT-X-ENDLIST
------------------------------------
GET /vod/test/media_w1513279074_b1473536_0.ts HTTP/1.1
allow-cross-domain-redirect: false
User-Agent: Mozilla/5.0 (Linux; Android 8.0.0; SM-G930F) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.157 Mobile Safari/537.36
Connection: Keep-Alive
Accept-Encoding: gzip
HTTP/1.1 200 OK
Accept-Ranges: bytes
Access-Control-Expose-Headers: Date, Server, Content-Type, Content-Length
Server: WowzaStreamingEngine/4.7.6
Cache-Control: no-cache
Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: OPTIONS, GET, POST, HEAD
Access-Control-Allow-Headers: Content-Type, User-Agent, If-Modified-Since, Cache-Control, Range
Date: Wed, 26 Jun 2019 09:32:20 GMT
Content-Type: video/MP2T
Content-Length: 1702340
[data]
------------------------------------
we are facing the same issue with the current chrome version 76.0.3809.132. serving a mp4 does not work - converting the mp4 to m3u8 works fine using ffmpeg:
ffmpeg -i MAH00878.MP4 -g 60 -hls_time 2 -hls_list_size 0 -hls_list_size 500000 -b:v 15M -b:a 96K MAH00878.m3u8
unfortunately serving the content as mp4 would be the way to go as we wouldn't need to post-process the video. any solution for this?
we don't think it's an cors issue because as I wrote we can access the m3u8 from the server with the same cors settings
one thing to add: If we use the same mp4 without the vr plugin, videojs plays the 360 video just fine (of course without the proper display)
FileInfo - ffprobe:
Metadata: major_brand : isom minor_version : 512 compatible_brands: isomiso2avc1mp41 creation_time : 2019-09-09T17:25:01.000000Z encoder : Lavf58.13.101 Duration: 00:01:51.41, start: 0.000000, bitrate: 52202 kb/s Stream #0:0(und): Video: h264 (Main) (avc1 / 0x31637661), yuv420p, 2400x1200 [SAR 1:1 DAR 2:1], 52066 kb/s, 29.97 fps, 29.97 tbr, 90k tbn, 59.94 tbc (default) Metadata: creation_time : 2019-09-09T17:25:01.000000Z handler_name : VideoHandler Stream #0:1(und): Audio: aac (LC) (mp4a / 0x6134706D), 48000 Hz, stereo, fltp, 128 kb/s (default) Metadata: creation_time : 2019-09-09T17:25:01.000000Z handler_name : SoundHandler
FileInfo -mediainfo:
{ "media": { "@ref": "OneX_7.mp4", "track": [{ "@type": "General", "VideoCount": "1", "AudioCount": "1", "FileExtension": "mp4", "Format": "MPEG-4", "Format_Profile": "Base Media", "CodecID": "isom", "CodecID_Compatible": "isom/iso2/avc1/mp41", "FileSize": "726989349", "Duration": "111.411", "OverallBitRate_Mode": "VBR", "OverallBitRate": "52202339", "FrameRate": "29.970", "FrameCount": "3339", "StreamSize": "98316", "HeaderSize": "40", "DataSize": "726891041", "FooterSize": "98268", "IsStreamable": "No", "Encoded_Date": "UTC 2019-09-09 17:25:01", "Tagged_Date": "UTC 2019-09-09 17:25:01", "File_Modified_Date": "UTC 2019-09-09 18:02:52", "File_Modified_Date_Local": "2019-09-09 20:02:52", "Encoded_Application": "Lavf58.13.101" }, { "@type": "Video", "StreamOrder": "0", "ID": "1", "Format": "AVC", "Format_Profile": "Main", "Format_Level": "5.1", "Format_Settings_CABAC": "Yes", "Format_Settings_RefFrames": "1", "Format_Settings_GOP": "M=1, N=30", "CodecID": "avc1", "Duration": "111.411", "BitRate_Mode": "VBR", "BitRate": "52066124", "BitRate_Maximum": "120000000", "Width": "2400", "Height": "1200", "Sampled_Width": "2400", "Sampled_Height": "1200", "PixelAspectRatio": "1.000", "DisplayAspectRatio": "2.000", "Rotation": "0.000", "FrameRate_Mode": "CFR", "FrameRate": "29.970", "FrameCount": "3339", "ColorSpace": "YUV", "ChromaSubsampling": "4:2:0", "BitDepth": "8", "ScanType": "Progressive", "StreamSize": "725095042", "Encoded_Date": "UTC 2019-09-09 17:25:01", "Tagged_Date": "UTC 2019-09-09 17:25:01", "BufferSize": "200000000", "extra": { "Codec_configuration_box": "avcC" } }, { "@type": "Audio", "StreamOrder": "1", "ID": "2", "Format": "AAC", "Format_Settings_SBR": "No (Explicit)", "Format_AdditionalFeatures": "LC", "CodecID": "mp4a-40-2", "Duration": "111.403", "BitRate_Mode": "CBR", "BitRate": "128972", "Channels": "2", "ChannelPositions": "Front: L R", "ChannelLayout": "L R", "SamplesPerFrame": "1024", "SamplingRate": "48000", "SamplingCount": "5347344", "FrameRate": "46.875", "FrameCount": "5222", "Compression_Mode": "Lossy", "StreamSize": "1795991", "StreamSize_Proportion": "0.00247", "Default": "Yes", "AlternateGroup": "1", "Encoded_Date": "UTC 2019-09-09 17:25:01", "Tagged_Date": "UTC 2019-09-09 17:25:01" } ] } }
您使用的是https://github.com/videojs/http-streaming还是https://github.com/videojs/videojs-contrib-hls？
I have the same problem. Android chrome error：your browser/device not support HLS 360 video. See http://webvr.info for assistance. I use version 1.7 videojs-vr，Chrome version 78 and 74.The video format is .M3u8. My code is as follows：
To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video
I look forward to your reply and wish you a happy job
我们目前的Chrome版本76.0.3809.132面临着同样的问题。提供mp4服务不起作用-使用ffmpeg将mp4转换为m3u8可以正常工作：
ffmpeg -i MAH00878.MP4 -g 60 -hls_time 2 -hls_list_size 0 -hls_list_size 500000 -b:v 15M -b:a 96K MAH00878.m3u8不幸的是，将内容作为mp4投放是一种方法，因为我们无需对视频进行后期处理。有什么解决办法吗？
我们认为这不是cors问题，因为如我所写，我们可以使用相同的cors设置从服务器访问m3u8
crossorigin="anonymous"
