HTML5 Videos do not work in Safari on Mac or iOS, but work fine in other browsers

Store Design
, ,
1

For the past several months we’ve had problems with Safari when it comes to MP4 videos. Videos play fine in other browsers, just Safari on both iOS & Mac. For the most part this affects any site visitors with iOS 15 or above,

What users see is a black space where the video should be. And it should be auto playing. The videos don’t have sound and we do use the muted attribute but still no dice.

The odd thing is the videos sometimes load at first, but navigate away from the page, then back again and nothing, just black where the video should be playing.

We’re not using any fancy code for this just a typical HTML5 video element:

This is what users in Safari see:

Screenshot 2023-07-12 at 12.30.45 AM.png
Screenshot 2023-07-12 at 12.30.45 AM.png1024×634 17 KB

I can’t figure out what’s wrong here. I’ve ruled out low power mode, so it isn’t that. Any help is welcomed!

1 Like
2

@PurpleMamba
Hello,

Here are some solutions you can try to address the issue of HTML5 videos not working in Safari on Mac or iOS:

  1. Check Video Encoding: Ensure that your videos are encoded using the H.264 codec and the MP4 file format. This combination is widely supported by Safari on Mac and iOS. You can use video conversion tools or video editing software to re-encode your videos if necessary.

  2. Provide Multiple Formats: To ensure broader compatibility across different browsers and devices, consider providing multiple video formats. In addition to MP4, you can include alternative formats such as WebM and Ogg. Use the HTML5 video element with the appropriate type attribute to specify different video formats.

  3. Set MIME Types: Make sure the correct MIME types are set for your video files. When serving your videos, set the Content-Type header to “video/mp4” for MP4 files. This helps Safari identify the file type correctly.

  4. Enable Autoplay: If you intend to autoplay videos on your website, be aware of Safari’s autoplay policies. On iOS, autoplay is generally not allowed unless the user has previously interacted with the page. You can use the autoplay attribute along with the muted attribute to enable autoplay in Safari, but note that the sound will be disabled unless the user manually unmutes it.

  5. Check CORS Settings: If your videos are hosted on a different domain or subdomain, ensure that you have properly configured Cross-Origin Resource Sharing (CORS) headers on the server. This allows Safari to fetch the video content from a different origin.

  6. Update Safari: Make sure you are using the latest version of Safari on your Mac or iOS device. Updates often include bug fixes and improvements related to video playback.

  7. Test on Different Devices: Verify if the issue is specific to certain devices or Safari versions. Test your videos on various Mac and iOS devices to identify if the problem is widespread or limited to certain configurations.

3

@PurpleMamba

Please try this code
4

@oscprofessional

Thanks for your response.

Here’s what I have so far:

  1. Videos are H.264 MP4 format.
  2. I am also supplying WebM but Safari only supports MP4 & MOV formats, so unfortunately that doesn’t help in this case.
  3. MIME types are set.
  4. Autoplay is enabled.
  5. Videos are hosted in the same domain.
  6. Safari is updated.
  7. Multiple devices show the same issue, Any iOS device running iOS 15 or higher.

We still see this issue.

5

Please delete this reply. Sorry.

6

@dmwwebartisan I tried this trick but still have the issue in Safari.

7

Having the same issue over here on https://triangl.io/ and it’s been difficult finding a solution / workaround. Referencing a YouTube link works fine on macOS/iOS Safari, but then the quality sometimes seriously suffers. Did you ever find a solution, @PurpleMamba ?

8

I have the same problem, only in Canvas LMS. Same manifestation. Worth knowing it’s bigger than just Canvas.