How to fix videos not playing in Safari

J_C

I came across an issue recently with videos in Zenphoto not playing in Safari, with it affecting both the desktop and iOS versions, while the videos played in Firefox, Chrome, and other Chromium-based browsers. I saw lots of other people online having the same issue (just not here with Zenphoto), and I found lots of wrong answers, or unanswered forum posts. So I wanted to post here how I got it to work if anyone else ever comes across the issue.

First, the videos were playing fine not that long ago when I tested them, I just wasn’t sure what recent change, including turning on Cloudflare for my site, might have caused them to stop playing in Safari.

In Zenphoto, with mediaelements.js enabled, Safari would show this message when you tried to play a video:

Media error: Format(s) not supported or source(s) not found
Download File: https://example.com/zenphoto/-FOLDER-/-FILE-.mp4

With the native video player you would get a can’t play icon displayed.

If you looked in the browser console, you would see this:
[Error] Unhandled Promise Rejection: NotSupportedError: The operation is not supported.
(anonymous function)
rejectPromise

It turns out Safari only plays videos if the server supports byte-range requests.

Meaning the video will stream and play in chunks, so it can start playing before the entire video is loaded, and you can hop around in the timeline and other chunks will load. Specifically it means the status in the headers (which you can see under the Network tab in Web Inspector) must be 206, and not 200.

Other browsers like Chrome and Firefox will still play the video if they are status 200, they will just wait until the entire video is loaded and then will play. While I wish Safari did this, the video playing experience is better if the video file can be streamed.

It turns out turning on compression for my entire site caused the video files not to stream. It wasn’t Cloudflare’s Brotli compression being turned on and it wasn’t zlib.output_compression being enabled in PHP INI for my server.

What caused the problem was in cPanel, under SOFTWARE - Optimize Website - Compress Content, turning on “Compress All Content” did it. Either disable it, or better yet, select the other option “Compress the specified MIME types. - MIME Types - text/html text/plain text/xml”.

There are other ways to turn off compression on videos, depending on your server setup, that’s what worked for me. Hopefully this helps someone else out in the future that comes across this strange issue.

acrylian

Just to note that the Mediaelelementjs plugin not maintained anymore and the included jplayer plugin is marked deprecated since 1.6 as well. Better use the video-class plugin for native HTML5 playback.

Good you solved it as that is of course way outside of our realms. Tthe video element does only have a preload attribute to either preload all (not really recommended) before even anyone clicked play.

Real streaming videos are of course complete different beast and require a very special server setup.

Another common issue is that not all browsers and browser versions support all codecs. Also outside our

J_C

On the topic of the mediaelement.js plugin, the link is broken on the plugin’s “IMPORTANT” notice. For the mediaelementjs.com link it is missing the “:”.

acrylian

As said it is not maintained anymore for about two years already.