I am having some Meteor trouble. I am adding an MP4 video to a website, and it works in all browsers except Safari. Both on iOS and MAC Desktop the videos are there when I inspect them, but regardless of any css etc I cannot get them to show up…on any page.
I have tried other formats (webm etc) and even other videos that work from other non-Meteor websites but those do not work either. I AM using the playsinline property.
I have actually tried this on other Meteor apps I have also, and it seems to have the same problem. I simply cannot get an inline html5 video to show up in Safari on ANY Meteor application.
Here is the basic html5 video code I have been adding:
I think your trouble is not with Meteor but with HTML5 and browser support.
Did this help when your searched the net looking for a fix? https://stackoverflow.com/questions/20347352/html5-video-tag-not-working-in-safari-iphone-and-ipad.
Also, the way your paths look like, I presume you have a video folder under your Meteor project public folder.
If you use React (or not) and your videos are large, best would be to convert to HLS and deliver via something like react-player (which also offers a clean JS version). When I say best, I mean if you have multiple videos and you need to have them starting right away without buffering and … old internet user experience.
Hey @paulishca as mentioned in my post, I have tried the video on every other platform and it loads just fine. Even when using a fresh Meteor install without any modifications, the video does not display.
I would encourage you to try the same. Install Meteor fresh, add any html5 video to the initial page Meteor ships with. Use ANY combination of accepted HTML5 video parameters, it wont load…but only in Safari. Take that same code and add it to a static HTML5 boilerplate, and open it in safari…it will work fine.
You are correct though, I am loading the video from the local meteor /public folder; however, I have tried loading videos from other accepted sources such as this: https://www.w3schools.com/html/html5_video.asp and still it will not load via Meteor.
Unfortunately, I do believe the bug resides within Meteor…somehow.
I’m pretty sure this is a Safari bug (feature?) to protect users from downloading large files and from autoplay.
Our Video component file is jsut over 500 lines to deal with issues like this. I definitely recommend using tools like VideoJS to handle cross browser inconsistencies.
Apple gave us a new present recently with the new iOS safari changing the user agent string to look like desktop safari, even though the render rules are different and incompatible so now we use a combination of user agent and feature sniffing to differentiate between iPads, iPhones, different versions of iOS and everything else.
Funny that everything else works exactly as the spec describes and it’s just the various iterations of Safari that need weird overrides.
The workaround relevant to your case is that iOS won’t load videos automatically anymore, so we call: video.load() when the component renders to get things moving
@coagmano I agree it is a Safari issue (to an extent); however, the argument could be made that this is still a Meteor issue also. I only say this because the issue does not exist in any other frame work I have tried (REACT, VIEW, NEXT, SVELTE, SAPPER). So while I agree Safari is being pretty goofy by comparison to other browsers, Meteor is also behaving differently than other frameworks.
I only point this out because I absolutely LOVE Meteor and have always been loyal to it. A big part of this is because I trust Meteor. I no longer use BlazeJS, but Meteor ships with it. I want to recommend Meteor to other devs but it gets difficult when the framework it ships with has issues such as this…
Hope noone takes this the wrong way…I say it all out of love.
One final item here. In order to get the video to play as we needed in both Safari on MAC OS and iOS we had to modify the code by @jamgold slightly. Unfortunately prior versions of Safari freaked out with VideoJS. Here is the code that seemed to work for all browsers that we could find:
I have started working on a small package to standardize the video across all browsers, and to my surprise, when invoked from within the package the plain <video> tag works, even in Safari. It also seems to depend on where the video is coming from (external website, network speed).
This reminds me of the good old Internet Explorer days …
@jamgold funny enough…I LITERALLY just said the same thing on your reply to my Stackoverflow! I really appreciate your help with this. I see you being super active on here all of the time. Despite the issues I have found with Meteor lately, knowing it still has a great community is super encouraging!