HTML 5 Video not Playing on Mobile Safari

Published by John on August 26, 2019 Under Web Design

One of my clients has a HTML5 video on their website homepage, which auto-plays whenever anyone visits their website. It uses a standard <video> tag, with the appropriate attributes, in this case ‘autoplay loop muted playsinline’ that keep Google Chrome and other browsers happy with an autoplaying video(muted specifically).
The code basically looks like this:

	<video class='my_video' autoplay loop muted playsinline>
		<source src="/my_video.mp4" type="video/mp4">
	</video>

This was working in all browsers that support HTML videos, but was not playing in Mobile Safari on the iPhone or iPad, as well as desktop Safari on a Macbook laptop.

I went down a bit of a rabbit hole, trying a few different video encoding methods, even though handbrake was used to encode the video and I’ve not had issues before on mobile devices. After spending a fair bit of time debugging, I ended up creating a blank HTML page with just the video code and then uploading the video to a different server, which indicated that it wasn’t actually the video or the code, but something about the server. Then, I setup a subdomain on the server that wasn’t working and it also played without issue on an iPhone.

As it turns out, the problem was actually related to CloudFlare, as this site uses CloudFlare for caching and when they serve up the video, and how they are serving up the video. Whether this intentionally something they haven’t addressed due to them offering a video CDN service or simply a by product of how their caching works/interacts with the origin server, I’m not sure. However, I have confirmed that the below will fix the issue if your site is on Cloudflare and on a server running Apache(httpd) web server.

The Problem

On a site running cloudflare, when using an HTML5 Video code(<video>), an MP4 video, encoded using the H264 video codec and AAC audio codec, will not play on devices running iOS or OSX, like iPhones or iPads. However, it will play on all other devices, including Android, Desktop Browsers, etc.

No changes or addition of any of the video attributes, including autoplay, muted, loop, controls, or playsinline make a difference on iOS or OSX devices, nor does changing thetype, encoding type, or MIME Type.

It seems like this may be related to file size, so it is possible that you might not see this happen on large video files, but do on small ones.

Possible Solutions

Again, this only applies to sites using CloudFlare, or possibly other CDNs!

1) Set an Environmental Variable in your .htaccess or httpd.conf file so that Video files are not compressed

I would start by adding the following to your .htaccess file. This tells the server to not compress video files using mod_deflate, which should get passed on and honored by cloudflare.

A word of caution: Editing your htaccess file can break your website. So, you should always edit this file using SFTP, FTP, or something like cPanel and not using a WordPress plugin or tool built into the website itself. If you do and something breaks, you may be unable to fix the issue without using FTP/SFTP/cPanel.

Add the following to your server’s .htaccess file:

SetEnvIfNoCase Request_URI . (?:mp4|ogv|webm)$ no-gzip dont-vary

2) Consider using a CDN to host the video

Once you’ve confirmed the above works, you may want to remove that code and consider using a CDN to host the video, rather than cloudflare. Or looking into their video hosting service. For just a single video, it probably doesn’t matter, but I believe cloudflare doesn’t really want to work as a video CDN, especially on their free plans. And, this is disabling gzip compression for ‘mp4’ , ‘ogv’, and ‘webm’ video files, so may have some impact on performance

3) Bypass CloudFlare Cache for this specific(or all) video files

I was not able to get this working, but you may be able to add a page rule to bypass the cache for these specific files.

No Comments |