2

On a WordPress site a video background is loading/playing in Chrome, not Safari. Upon further inspection the video file doesn't even seem to be loading/working in safari, eg:

This link (https://fightthenewdrug.org/wp-content/themes/salient-child/video/About_Intro_Video.mp4) loads the video for me in Chrome, but not Safari. Same exact video file, different browser. In Safari I'm getting a play button with a slash through it:

a busy cat

The same exact video file was uploaded to my dev site (https://dev.ftnd.org/wp-content/themes/salient-child/video/About_Intro_Video.mp4 ) which is hosted on the same hosting account and works in both Safari and Chrome.

I had everything working on the dev site and in trying to push the site live the files aren't working/accessible from the main site.

halfer
  • 19,824
  • 17
  • 99
  • 186
Scotosaurus
  • 353
  • 3
  • 18
  • This is a problem that has been seen before and seems to be some issue with interaction with specific servers and Safari: https://stackoverflow.com/a/32998689/334402 (more a discussion than an answer). Your video works fine in Safari also if you download it and play it using safari locally. Can you let us know what server OS, framework etc you are using and if you can think of any difference between your dev and live sites? – Mick May 03 '18 at 09:53

1 Answers1

1

I was having the same issue and it turned out to be because we were using a Service worker.

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.

Safari Network Calls with Service Worker

My Stack Overfloweth
  • 4,729
  • 4
  • 25
  • 42