I am having a very frustrating issue with HTMl5 video and safari/mac.
I am using html5 video throughout the site where needed and it works/plays on every browsers bar safari on a mac (its fine on safari windows and chrome mac for example)
The videos dont stream and only play once the entire file is downloaded. At first I thought it may be to do with the index of the file being at the end and not the beginning (link html5 video = safari wants to download it all) so i tried qtindexswapper but when loading the MP4 into the program it said the MOOV/Index was in the correct position.
Anyone have any idea why safari mac has this issue?
A.
I've seen HTML5 be very picky with videos. They may play fine in a player, but not play or maybe play with no audio once embedded. This is usually due to a video not properly created/formatted. In most cases, re-creating the file in a professional level program alleviates the issue.
Related
below are 2 video files uploaded in aws. it will play in chrome or firefox etc, but wont play in safari
https://s3.ap-south-1.amazonaws.com/apppreprod/Vid_637768063547139404.webm
https://s3.ap-south-1.amazonaws.com/apppreprod/Vid_637745132425435217.mp4
The issue is that safari wont play videos uploaded into blob storage like aws.
recomended solution is to save the video in other server and it will play in safari.
The two links you provide can be opened in other browsers. I tested it with an iPhone, and found that it could not be opened in the safari browser, but the other three-party iPhone browsers can. After checking the Apple official website, it is certain that the safari browser of the iPhone supports the MOV video format.
suggestion:
When uploading a video, the video can be converted and stored as needed
Even within the simplest html file, a video file is played extremely sluggished (about 8fps) in Firefox Mac. Other browsers/OS work fine. When i use the url of the video directly in the browser, no problem. I happens only when inserted into a html, using a standard html5-video.
Example of video url :
http://maxxhat.com/wp-backend/wp-content/uploads/2018/08/showreel-short.mp4.mp4
Using latest versions of MacOS High Sierra (Version 10.13.6) — Firefox Quantum 61.0.2 (64-bit)
Any idea ?
Thank you!
Ok i got it :
I had two attributes that were slowing it down drastically:
style="filter:brightness(108%);" (used to correct some rgb range interpretation) and... muted !
Beware that removing the muted blocks the video on Chrome. So i ended up building an exception on Firefox to remove the attribute muted.
I have tried using iframe and also video tag and object tag to play the video. In some cases, it plays only the audio from the video, but video doesn't show up.
Secondly, the same video file plays well on a separate tab in the browser, but not within my iframe.
This issue is on all browsers on my Mac, but on a windows machine it plays well.
I finally found it. Apple has a good documentation of its own for this. https://developer.apple.com/library/mac/documentation/quicktime/conceptual/qtscripting_html/QTScripting_HTML_Document/ScriptingHTML.html#//apple_ref/doc/uid/TP40001525-2-GettingaBrowsertoLoadQuickTime
I simply had to use the embed tag properly as they have explained.
I tried searching for a solution to this and within three days of browsing the forum I could't find any help.
This is the link where I have my video:
http://www.aguacatesjbr.com/English/Company/company.html
I believe the code is correct because I replaced my source video with the Oceans-Clip video provided by the site. The Oceas-Clip video CAN PLAY on FireFox and IE but not my original video. However, if I type in directly the address of my video it DOES render on FF and IE.
I don´t think it is size problem because I was testing it with a video that weights 4.20MB.
I am having this problem with IE and FireFox in both PC and MAC. Android and Apple devices work perfectly as well with Chrome and Safari.
First of all, you need to serve the videos with the correct mime type, which is video/mp4 for H.264 in mp4, and video/webm for WEBM. See MSDN, MDN.
Right now you serve the .mp4video as video/mpeg.
Then, I your page has a source for video/webm pointing to http://www.aguacatesjbr.com/Videos/JBR_video.webm, which does not exist at the time of writing. Fix that.
Firefox can play back H.264/mp4 on certain platforms only. For a list of currently supported platforms and video support in Firefox in general see "Supported media formats".
Lastly, there will be warning messages regarding video load failures in newer Firefox versions. E.g.:
[20:35:11.515] HTTP "Content-Type" of "video/mpeg" is not supported. Load of media resource http://www.aguacatesjbr.com/Videos/JBR_video.mp4 failed. # http://www.aguacatesjbr.com/English/Company/company.html
[20:35:11.515] All candidate resources failed to load. Media load paused. # http://www.aguacatesjbr.com/English/Company/company.html
I have embedded HTML5 video(s) in a site - http://dev.thejoint.com - where they work in Firefox, Chrome, IE9 (ahem, ahem) and Opera but not in Safari on some Macs. They even work in iPhone and Android.
On my iMac, it works fine. The .mov file even works on Windows + Safari combination, since we know we have to install Quicktime for that.
Worst part is, the video works in Safari browser directly - http://dev.thejoint.com/media1/jointsequence.mov - but not on the page where it has been embedded.
I have tried every possible thing with web.config and IIS to add the MIME types as well.
Hope someone has some insight, because this is the only things remaining in completing off the project.
On Windows, <video> only works in Safari if QuickTime is installed. I don't know if this affects Macs also, but it could be the cause.