HTML5 Video Conflict in Safari... a solution!
For the past week I've been dealing with a HTML5 background video issue in Some versions of Safari.
Now of course it worked great in my Safari, my other developers Safari and our spare computer's Safari browser. It also worked fine in Chrome and Firefox... but that's hardly a suprise.
But in the client's version of Safari (of course) it was not working. I asked him to check the version and he said it was 11+ so no problems there. I also had him check for extention conflicts and settings that may prevent plugins from working or content from appearing on the page.. no issues. A real mystery.
First I tried converting the video to different formats. It's recommended to include .webm, .ogg (or is it .ogv) as well as the all important .mp4 -- I did that. I even tried a bunch of different codec settings within the .mp4 format.. not luck.
The worst part is that it's working in Safari on my own computer.. if it didn't I could a least troubleshoot it more easily.
This site that I am developing is really custom, not only is it in WordPress but it uses a special template for the homepage that utilizes the FullPage.js code with the Parallax extension. Fullpage.js is available for free online but the parallax extension needs to be purchased for $29. The activation code for this extension can only be used on one website domain so I was holding off before activating the extension because the site is currently on our development server which is different from where it will finally live.
I had one last thing to check... was it possible that the activation of the parallax extension was preventing the video from playing in some versions of Safari? It said in all the documentation that you could develop a site with a non-activated version the only difference would be a red badge that shows in the top-left corner that reads (*not activated)
After migrating the entire Wordpres development site to the final server and activating the parallax extension I had the client test the HTML5 video and guess what... IT WORKED!!! YES!!
I think what must have been happening, in some versions of Safari, is that it was reading the non-activation of that extension as an error, and thus not processing any more JavaScript on the page. Or at least within that Fullpage.js section of the homepage, where the Video was living at the time.
Anyway... a few hours wasted but LIVE AND LEARN.. Thought I would share in case anyone came across a similar issue in Safari.
