It's me again, the author of #175 with more Safari-related problems 😢.

I am aware that this is most likely Safari's bug and there's little we can do about it, but I thought i will report it here anyway in the hopes of brainstorming a better hack to work around it and warning others about it.

Bug description

Videos do not load at all in Safari on pages visited with Unpoly links.

Reproduction project

• GitHub repo unpoly_video_test
• Glitch project (same content as the GitHub repo minus the README)

Steps to reproduce the behavior:

This behavior is recorded as a gif and included in the reproduction project GitHub repo's README.

1. Go to reproduction project linked above in macOS Safari
2. Start the preview, index.html loads with an autoplaying video
3. Click link "page 1" to reload the same page via Unpoly
4. The video disappears (it should still be there, autoplaying)
5. Click link "page 2" to go to a similar page with an autoplaying video with controls
6. There is no video (it should be there, autoplaying with controls)
7. Edit the path of the preview to index2.html to reload the second page
8. There is a video, as it should

Expected behavior

Videos should always load when navigating with Unpoly, respecting the desired autoplay/mute/control options, in all modern browsers.

Browser version

• macOS 12.4
• Safari Version 15.5 (17613.2.7.1.8)

and also

• iOS 15.5 on an iPad
• Safari

Additional context

This bug doesn't appear for me in other browsers that I tested (macOS Firefox, macOS Chrome, Android Firefox, Android Chrome).

I found a dirty workaround for autoplaying videos without controls, but it doesn't work for videos with controls - the controls never load.

up.compiler('video', async function (video) {
  try {
    await video.play()
  } catch (err) {
    // do nothing
  }
})

This would be good enough for me, but unfortunately I do have a not-autoplaying video with controls on my current project that uses Unpoly and I'm looking for any ideas on how to approach this problem. Currently I'm thinking that the only solution to this problem might be to somehow detect with HTMLMediaElement's API that the video didn't load at all, and replace it with an image and a link to the video then.