Cloudfront mp4 not playing on some Android and iPhone browsers - html

I created an AWS Cloudfront distribution for my mp4 files hosted on S3. The Cloudfront distribution points to the S3 origin of the mp4 files.
I have an HTML5 website that plays these mp4 files in the code but I noticed that some of the mp4 files did not play on certain Android and iPhone devices.
When I tried opening the Cloudfront URL for the mp4 files that were not playing, the result was the same; so the problem might not be in my HTML5 video code, it might be some mp4 files could be incompatible with certain devices.
For testing purposes following are two URLs for mp4 files hosted on Cloudfront, the first one works on all browser versions (Desktop, Android, iPhone). The second one works on
1).http://djkvzdnel0qlh.cloudfront.net/prepare_booster/2+AUDIO+Prepare+Booster/EventPrep_M01_P01.mp4
Works on:
Desktop browsers
Android browsers
iPhone browsers
2).http://djkvzdnel0qlh.cloudfront.net/explore_support/3+AUDIO+Explore+Support/stress/AAA_MS_BF_SET_1145.mp4
Works on:
iPhone 5S - iOS ver 12.1.4 - Safari browser.
iPhone 6S: - iOS ver 12.1.4 - Safari browser.
iPhone X
Newer iPad Mini - iOS ver 12.1 - Safari browser.
Newer iPad Mini - updated to iOS ver 12.1.4 - Safari browser.
Older Full Size iPad - iOS ver 9.3.5 (up to date for this unit)
Very old iPod Touch - iOS ver 9.3.5 (up to date for than unit) - Safari browser.
DOES NOT work on:
Samsung A5 - Android 8.0.0 - Firefox, Samsung browser, Chrome tested
iPhone XS
iPhone XS Max
iPhone XR
Need help to know why I am having problems with the second mp4 file. If anyone could point me in the right direction, I would appreciate it.

Try to give the second video a resolution of at least, say, 80x60.

Related

iOS Safari WebRTC > Chrome > Other Browser Black Screen

I currently have an iPhone that is connecting to a browser via WebRTC and from that browser I have other additional browser windows connected via webRTC that preview the same video stream.
iPhone > Safari Desktop (video works) > Chrome/Firefox/Safari Desktop works great
iPhone > Firefox (video works) > Chrome/Firefox/Safari Desktop works as well
iPhone > Chrome (video works) > Chrome/Firefox/Safari display a black video
My issue is a little hard to explain so I've created an image to help illustrate the issue:
The crazy thing is it works when the source is an Android device or another browser. Is it possible that iOS Safari is limiting the WebRTC stream to the first browser? Is there a way to debug why Chrome is displaying black instead of the video?
It looks like this is a known issue with Chrome and H264:
https://bugs.chromium.org/p/chromium/issues/detail?id=1073828&q=black%20h264&can=2
When I disable H264 it works so I will run with that for now. Unfortunately that means we miss out on the benefits of H264 hardware encoding/decoding.

WebM video format - Browsers compatibility

How are you doing?
Well. I'm running 3 videos on my website - HTML5
1st video > Specs: 4K 3840 × 2160 pixels - .WebM format
2nd video > Specs: FullHD 1080p 1920 x 1080 pixels - .WebM format
3rd video > Specs: FullHD 1080p 1920 x 1080 pixels - .mp4 format
As known .webm has compatibility pratically with all browsers.
I made a really simple test to check which browser has compatibility with .webm
Selected browsers for the test I've done:
Google Chrome, Safari, Firefox, Opera and Microsoft Edge.
1st test:
Browsers that definitely have compatibility with .webm after playing the video on my website:
Google Chrome, Firefox, Opera and Microsoft Edge. (Definitely, Safari is the only not acceptable)
2nd test:
Browsers that definitely worked on 4K .WebM:
Google Chrome, Opera and Microsoft Edge.
3rd test:
Browsers that definitely worked on 1080p .WebM:
Google Chrome, Firefox, Opera and Microsoft Edge.
4th test:
Browsers that definitely worked on 1080p .mp4:
Google Chrome, Safari, Firefox, Opera and Microsoft Edge.
Conclusion: From the list (Google Chrome, Safari, Firefox, Opera and Microsoft Edge) all browsers can play .webm format, except safari.
From the list of browsers that can play .webm (Google Chrome, Firefox, Opera and Microsoft Edge), all of them can run 4K. Only Firefox doesn't accept 4K .webm (firefox only accepts 1080p .webm)
Safari definitely can't run .webm format.
If you wanna check the tests I've done by yourself, please access my website link: http://167.71.100.135
Here is the point:
I'm definitely fine that Safari doesn't work with .webm
What I really don't "accept" is the way Firefox goes. Does anyone
knows why Firefox can't run on 4K .webm? As mentioned before, maximum
resolution I could get on firefox was 1080p .webm
Does anyone know how to make it works on 4K .webm? I'm really not satisfied with maximum firefox 1080p .webm, knowing that all others browsers do the 4K job.
Thank you very much!
I value your feedback, so let me know what you think!
Sincerely,
Mat
How are you my friend?
Yes, the video 4k is 3.8GB, 2k is 1.5GB and 1080p 800MB.
Exactly, the videos are an hour long and I can play smoothly the 4K video using any browser (chrome, opera and microsoft edge). I can't play only on firefox. (Firefox only accepts only max 1080p)
Oh yeah, I tried with a shorter video for sure. It's a 5min 4k (600mb) video and firefox doesn't accept... here is the link, you can try by yourself, please: http://167.71.100.135/5min-4k-600mb
Look forward to hearing from you.
Sincerely,
Mat
Do these videos play if you just open them locally in the browser? The videos are an hour long, and the 4k video is 3.8 GB, the 2K is 1.5 GB and the 1080p is 800 MB.
Perhaps trying with a shorter video? I am able to play a 600MB 4k video in Firefox opening from localhost.
Have you thought about streaming a video of this size?
EDIT:
Looking at the 3 videos with FFprobe, the 4k and 2k videos are VP9 encoded, and the 1080p is h264 encoded. You should standardise the encoding on all 3 videos, to ensure that it really is the size, and not the encodings:
https://www.streamclarity.com/probe?url=http://167.71.100.135/wp-content/uploads/media/webm1080p.webm

WebRTC in Firefox and Opera on Android. Usability issues

I'm having WebRTC usability issue in Opera (55.0.2719.50560) and Firefox (68.3.0) on Android (Samsung Galaxy S6).
Firefox problem: is asking me multiple (around 3) times about permission to use camera. Also is asking me all the time which camera I want to use (regardless that constrains are set)
Opera: is asking me multiple times (around 3) which camera I want to use (regardless of constraints).
Exactly the same code is working properly on the same phone on Chrome and using Safari and Chrome on iPhone.
All content is served using https.
Thank you for any suggestions.

Jplayer won't play html5 video

I went to https://github.com/happyworm/jPlayer/blob/master/examples/pink.flag/demo-02-video.html and copy and pasted the code from the example and made a simple node.js server to serve the page. However the video does not play. Instead I get the warning, Update Required To play the media you will need to either update your browser to a recent version or update your Flash plugin.
I have the newest browsers so shouldn't html5 work and I thought the point of flash in jplayer was to support older browsers that don't support html5. So why won't jplayer play on the newest versions of firefox, chrome, and safari on Mac OSX 10.10.3?
Here is a list of browsers I tried, note, chrome canary is the official nightly build from google.
chrome canary version 45.0.2451.0
normal chrome 43.0.2357.132
firefox 39.0
safari 8.0.6
I also tried with safari on my iphone running IOS 8.4
But jplayer does not play on any of these browsers.

How to enable HTML5 on iPad with safari or opera mini browser?

I have just installed a gateone server, a software that enable you to ssh other hosts just with a html5 browser, I could do this with Chrome on Windows 7, but it won't work in ipad's default browser - safari , and I just installed a Opera Mini in App Store, but it also won't work.
You can also use it if it will you , guys . the address is https://www.myciscolab.net/
HTML 5 is partly supported by safari, so the HTML5 you use on your website is probably not supported by Safari or Opera Mini. You could use websites like http://www.browsercompatible.com to determine which features of HTML5 you can use and which you can't. There are other websites as well click here