Failed to Load Resource, Plugin Handled Load on iOS

Question

Every time I try to view a video file on my server I get this error on iOS in Safari, Chrome.

I am using a blob server and then an Apache server so I am not sure what the problem is. However, when I only use Apache, I do get this error but then I have the video rendering too.

However when I render this using my server this is not working. Does anyone know why this is? The videos work fine on other devices and in browsers also works fine if accessed through Apache only.

Cohette

Answer 1

The solution to this problem was just a work around. The reason being the that blob servers aren't streaming servers. iOS devices expect the videos to arrive in small chunks. So for instance a streaming server is able to do this. However, a blob server just hands the video as a blob which is not what the iOS device expects. Some browsers are smart enough to handle this but others not.

The way I solved this was to add the video files outside of the blob server in a folder within the project and then render this through the Apache server instead of serving it via the actual blob server we were using. I hope this helps.

Cohette

Wow - thanks for this answer! Thought didn't occur to me that the web server might not be able to handle streaming. In my case Umbraco CMS couldn't handle it .. Once we moved the videos to another server everything worked fine. So fragile these systems. – Wingspan

This answer is absolute gold! I spent days in vain trying the various combos of video/audio formats/resolutions etc. The problem is definitely somewhere in my Spring code since the working Apache response contains minimal headers set (Server, Connection, Date, ETag, Keep-Alive). The solution works for iOS but also fixed my Safari on OSX. – Laskowski

Can you explain a little more about the solution? I am using wordpress so where shall I save the video to make it work? – Pettitoes

How do you serve the video in small chunks, what is the PHP code? – Marelya

Answer 2

I was also getting this error for some mp4 videos. Turns out it wasn't a server issue for me it was a video encoding issue.

Issue

A "moov atom" needs to be placed at the front of the video file. It serves as a table-of-contents for the video. That "moov atom" has to be read first for html streaming or it won't play on some devices.

The Fix

To fix, I used handbrake to transcode my video. Turn on 'web optimize' Also turning on zerolatency and 'fast decode' may help (found in the video tab).

Stepdaughter

Wow thank you for this, Celso. Re-encoding the video in handbrake using 'web optimize' solved the issue for me. Many thanks. – Keeley

Still working on 2022 :) Using handbrake to re-encode the video with "web optimize" is working like a charm. Thanks you @Stepdaughter – Expansive

This answer was useful in my situation. The server and browser code were fine. But the video still didn't play in Safari. Once I re-encoded the video with "web optimize" in handbrake, Safari started playing the video. Thank you so much, @Celso! – Ammeter

This was usefulf or me too. Here is a ffmpeg command to inspect the order of the atoms: superuser.com/a/1588589 – Jefferson

Answer 3

We were getting a similar error here. I thought it may have been the streaming issue since our video was hosted in blob storage on Azure. After setting up a Media Service for streaming, the video still didn't work. It turns out, the cause of the bug for us was Safari using a Service Worker. Below is some further explanation of what we found:

Safari first sends a byte range request for a Video tag that expects a 206 response. However, if you use a Service worker, the response returns with a 200 and it appears Safari doesn't know how to handle this. Our solution was to exclude using a Service Worker for Safari.

We found this by using the network tab of the Safari debugger on a Macbook to troubleshoot the issue we were seeing on the iPad. Attached is a screenshot for comparison/reference. The left tab shows what the call should look like by default. The right tab shows what you would see if using a Service Worker.

Standice

I have a web app that runtime-caches its videos via workbox (a service worker library). My videos are broken in Safari (and only in Safari). I thought it was weird that the videos load fine in other iOS browsers but than I remembered that Safari is the one iOS browser that supports service workers. Are you still excluding Safari from your service worker? – Retiarius

WebKit bug: bugs.webkit.org/show_bug.cgi?id=184447. Workbox issue: github.com/GoogleChrome/workbox/issues/1663. – Retiarius

Yeah, we're still excluding it. We're using a service worker in a very specific case that we didn't need for Safari. – Standice

Phil Nash has a range stream as well if you don't want to use workbox. Fixes Safari/iOS streaming for me. github.com/philnash/philna.sh/blob/master/sw.js – Ptosis

Answer 4

Add the following line of code to your .htaccess (located in the root of your WordPress installation):

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

The following screenshot is the new complete .htaccess

Steersman

This worked for me when Safari Mac wouldn't play .mp4 with error "Failed to Load Resource, Plugin Handled Load". So apparently Safari doesn't like gzipped content. – Thorrlow

This did it for me, Thank you! I was going crazy... – Caniff

Answer 5

I saw the error "Failed to Load Resource" and though that this is reason, why my videos are not playing.

Turned out, my videos were missing the hvc1 tag. And when I added it - they're playing fine.

In my case issue was with H256 HEVC videos, but in your case some other encoding / tagging issues can be the reason.

In my case, issue was fixed with ffmpeg:

ffmpeg -i input.mp4 -tag:v hvc1 -acodec copy -c:v copy -movflags faststart out.mp4

Lysin

Answer 6

In our case, we created a URL pattern for our blob assets and then set headers in that URL pattern definition page which sent back a mime type of 'video/mp4'. This should instruct the browser to treat the binary stream as chunked, which in turn meant we didn't need to download the whole thing before it started playing.

Lymphocyte

Can you elaborate more on this solution? – Billington

Answer 7

Google Cloud Platform Solution

This issue caused me a lot of headache, so I just wanted to add my specific solution here, if anyone else encounters this while deploying to Google Cloud Platform.

When trying to load MP4 videos in Safari, I was getting the same error:

"Failed to Load Resource, Plugin Handled Load"

Which was preventing the videos from playing.

Still, I wanted to try to keep everything inside Google Cloud, so I created a Storage Bucket for the site, and added the videos there.

Of course, trying to retrieve the videos from the storage URL from the main site resulted in a CORS error. Fortunately, you can configure CORS pretty easily on storage buckets:

Configuring cross-origin resource sharing (CORS)

Once that configuration was deployed, I was able to retrieve and load the videos on the site in Safari without the "plugin handled load" error.

Package

Answer 8

I was having same issue and none of the listed solution work for me. I was displaying videos on the site from S3 but they were not playing on iOS and giving issue listed above but one of the video was working without issue. I tried to add -tag:v hvc1 too but it didn't worked. I compared both videos via FFmpeg and found that it was an encoding issue. I was generating video via FFmpeg and adding -brand mp42 in generating the video worked.

In short, it is most probably due to different encoding format although both are of type video/mp4.

Tempest