Pantheon Community

Safari video loading issue on Pantheon

Has anyone had issues loading videos via the video element in Safari on Pantheon? It’s an http 206 partial request content status issue specific to Safari. Do you have a solution that doesn’t include hosting the videos somewhere else? We would prefer to keep them on Pantheon. It appears to be a service worker issue, but we don’t use service workers. Has anyone implemented this solution https://philna.sh/blog/2018/10/23/service-workers-beware-safaris-range-request/ or something else?

2 Likes

Hello! Welcome to the Pantheon community. :party_dancer_shark:

Are you trying to stream the videos? That can present some challenges on the platform (doc here)

I know you said you were trying not to host the videos elsewhere, but that’s what we recommend. Though I’m all ears if someone out there has a good solution!

1 Like

Just weighing in as we’ve had a similar issue. I assuming you’re not trying to create a streaming service, but just use a small video for an animated background. (A now common design component across modern websites).

In our case we were just using the a video html element, and the src attribute, nothing with react, but encountering the same result. Uncached requests would fail, subsequent request would pass.

What attempts to happens:

  • Safari is asked to download a URL containing a video.
  • Safari downloads the first byte using a range request to determine what kind of video and how to play it.
  • Safari then hands over the request including the fetched first part of the binary to a separate media player/component (“quicktime”)
  • The media component then attempts to download the using range headers.

This assumes range headers are supported at any time on the entire stack of the website serving the video file. On pantheon when you do a range request the pantheon servers (nginx) will just return the entire video. Which isn’t technically correct and safari stops trying to load the video, while all other browsers just load it anyway. I think you’re correct about it being a problem with service workers. But web servers also aren’t required to implement support for range request headers either.

Our findings overall to the cause of what we were seeing was:

  • The Pantheon backend doesn’t support range headers and will just deliver the entire file.
  • The CDN will not respond to range headers until the video is fully cached in the CDN caches.
  • This explains why/how the video CAN work once it has been downloaded a few times or at least some time after the initial requests.

You can observe this behavior in the network tab of safari dev tools, or even with the following curl command, by making requests and clearing pantheon cache to remove the file from the CDN.

curl -I --location --request GET ' https://your-awesome-website.io/wp-content/themes/ragnarok/assets/homepage/homepage-video-1600.mp4 ' --header 'range: bytes=0-1'

We weren’t able to find a simple code solution. Our best approach was to use javascript and use a static image as a fallback. Like you we weren’t interesting in hosting video with another provider just to support animated backgrounds. Hopefully this helps some. Best of luck to you!