video tags with posters fail to play when visited by turbo in iOS

[searls]

Say you have a page with a video tag with a poster attribute like this:

<video poster="https://upload.wikimedia.org/wikipedia/commons/7/7c/Aspect_ratio_16_9_example.jpg" controls>
  <source src="https://static.videezy.com/system/resources/previews/000/032/359/original/MM008645___BOUNCING_FRUIT_009___1080p___phantom.mp4">
</video>

If you visit this page via a turbo link in any iOS-based Safari and then you hit the play button on the video, the user won't see the video. Instead they'll only hear the audio and see the time/scrubber progress. If the playsinline attribute is set, the user will see the poster freeze frame instead of the video.

Seeing this in turbo v8.0.2 right now.

This is a very specific issue, but was incredibly difficult to isolate to turbo. Because refreshing the page worked, I assumed it was related to caching, when it actually could only be reproduced when a page containing a <video> tag was navigated to via turbo.

Only workaround I've found is to listen for turbo:load and then call load() on all video elements that have a poster attribute.

document.addEventListener("turbo:load", function() {
  const videos = document.querySelectorAll('video');
  videos.forEach(video => {
    if (video.poster) {
      video.load()
    }
  })
})