search

videojs / videojs-vr

A plugin to add 360 and VR video support to video.js.
https://videojs-vr.netlify.com/
MIT License
541 stars 144 forks source link

Player won't load media on Android Chrome #106

Open ghost opened 6 years ago

ghost commented 6 years ago

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>
gkatsev commented 6 years ago

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?

ghost commented 6 years ago

I'm also using Chrome for Android 67. Here are some screenshots:

captura de tela de 2018-06-27 14-56-53

screenshot_20180627-145655

screenshot_20180627-145320

gkatsev commented 6 years ago

Looks like you're using videojs-panorama and not videojs-vr?

gkatsev commented 6 years ago

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?

ghost commented 6 years ago

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

gkatsev commented 6 years ago

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.

ghost commented 6 years ago

Here is a screenshot from DevTools trying to load it inside a WebView.

captura de tela de 2018-06-27 15-51-12

ghost commented 6 years ago

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

ghost commented 6 years ago

I'm guessing this has something to do with the media itself?

gkatsev commented 6 years ago

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.

ghost commented 6 years ago

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.

gkatsev commented 6 years ago

Awesome, glad you got it working. Yeah, it's possible that a high framerate or high resolution could cause issues for the decoders.

AndrewStobie commented 6 years ago

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?

brandonocasey commented 6 years ago

Are you using https://github.com/videojs/http-streaming or https://github.com/videojs/videojs-contrib-hls ?

AndrewStobie commented 6 years ago

videojs-contrib-hls is what I am using.

FernandoJBCosta commented 6 years ago

I'm working with HLS without problem, you have to use like this in you html page:

index.zip

See the link: http://360play.pt

Best Regards

AndrewStobie commented 6 years ago

@FernandoJBCosta I went to 360play.pt on a pixel 2xl with latest chrome and got the same error I'm getting:

screenshot_20180806-132658

FernandoJBCosta commented 6 years ago

Very strange Works on Samsung s6 and s7 with native browser. I have an iOS, iPad and Mac Safari, woks to.

joelBrun commented 6 years ago

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.

helge79 commented 5 years ago

@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]
------------------------------------
bloigge commented 5 years ago

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

image

bloigge commented 5 years ago

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" } ] } }

xinyueyijiu commented 4 years ago

您使用的是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

tmadison-gpsw commented 4 years ago

Getting the same result. Pixel 4, Chrome.

Screen Shot 2020-07-17 at 1 03 12 PM Screen Shot 2020-07-17 at 2 14 28 PM
David2k13 commented 3 years ago

我们目前的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"

David2k13 commented 3 years ago

得到相同的结果。像素4，镀铬。

截屏2020-07-17 at 1 03 12 PM 截屏2020-07-17,2 14 28 PM

crossorigin="anonymous"