How to get Safari to stream self hosted MP4 via Cloudflare 

Safari browser logo : a blue compass with a red and white needle

I recently had to remove a bunch of videos served by Vimeo while I searched for an alternate hosting solution. In order to continue to stream these videos, I opted for the simplest solution which was to use the video element.

In a similar manner to the img element, we include a path to the media we want to display inside the src attribute; we can include other attributes to specify information such as video width and height, whether we want it to autoplay and loop, whether we want to show the browser’s default video controls, etc.

Everything worked fine, except that Safari didn’t play the video, even when accessing it with through a direct URL. After researching a bit, I found out that Safari expects a different status (206 Partial Content) in the file header than the one it was receiving (200 OK).

Video files are different to images or other static content. Video doesn’t want to be loaded in one go. Video should return a 206 Partial Content status in the file header which allows your browser to process larger files that require split or interrupted downloads with multiple simultaneous streams which improves latency.

It was receiving a 200 status code because its content was cached on Cloudflare edge servers.

Thomas James Hole explains what is going on in a post on Stirtingale and suggests to add a Cloudflare page rule to exclude MP4 files from being cached:

Cache Level: Bypass Cache

But that still didn’t fix my issue, despite having confirmed that the file was no longer being cached.

It took an additional .htaccess Apache directive by Jules to tell the server not to gzip mp4/webm/ogv files:

#To make MP3 streaming on Safari with Cloudflare CF
SetEnvIfNoCase Request_URI . (?:mp4|ogv|webm)$ no-gzip dont-vary

And suddenly, all was honky dory again.

Recent Logs — or the next 10 entries

Well, they might not be all that recent. You'll find the older entries in the archives.

  • My favourite phone case

    The Mason M5 Aramid case adds extra protection and grip without degrading the look & feel of the phone.

  • Carte Blanche

    I’ve just finished the Audible version of Carte Blanche, a James Bond novel by Jefferey Deaver, which retrofits James Bond in the 21th century alongside with (some of) today’s technologies, environmental and geopolitical contexts.

  • First ballet of the season

    We attended our first ballet of the season yesterday : Minimal Maximal at the Grand Théâtre de Genève.

  • Goodbye Pair Networks

    While the days are shortening and the rain falls quietly outside, I’m feeling a pang nostalgia as I’m about to close my last client accounts hosted at pair Networks.

  • Edward Snowden on The Joe Rogan Experience show

    Edward Snowden is the guest of episode #1368 of The Joe Rogan Experience talking about his newly released book “Permanent Record”.

  • Bangkok old town through sketches

    I love watercolour sketches and I find them perfectly suited to travel logs. I discovered “Bangkok old town through sketches” by Pitirat Yoswatana while we were visiting the Bangkok Art & Culture Center) last August.

  • Tracker-free site

    In a recent post, Garrett Dimon talks about how he quit using analytics on his personal site, and how he hasn’t missed it or even need it.

  • QiFi your Wi-Fi

    In a recent TidBITS article by Glenn Fleishman, I discovered how to securely generate QR Codes online.

  • How to enjoy Instagram ad-free

    Save Instagram’s progressive web app to your home screen to get rid of ads (for now).

  • Remembering Steve Jobs

    Steve Jobs passed away 8 years ago today.

More entries »

Cambodia — via Bangkok and the Gulf of Thailand

Screenshot of the homepage

So, we are off to South East Asia again. This might be the last time (or not) Emma comes with us. Mathias is off to Myanmar solo, and to Indonesia with Célia this Summer, so we decided to explore Cambodia, eventhough it’s the wet season.