Video Tags loaded via Turbo Drive

1

Hey all! I’m working on a little side-project, and am having an absolute blast tinkering with Hotwire.

I’ve run into a small snag I can’t seem to figure out. I have a video tag on a page. When I visit that page, the video doesn’t load—nada. If I refresh the page, it’s there just fine. Click away, and back, and it’s gone again.

If I add a data-turbo-permanent attribute to the video tag the behavior is slightly different. If I navigate to the page with the video, it still doesn’t work. But if I then navigate away, and back to the video page, it loads! And similarly, if I refresh on the video page, it sticks around correctly when I navigate away and back.

I’ve read up a bit on the HTMLMediaElement apis, but can’t seem to figure out what’s going on.

Here’s a gif demo showing the case without data-turbo-permanent:

demo-turbo-video
demo-turbo-video749×635 756 KB

Notice when I navigate back to the video page, there’s a quick flash of the video, where it looks like the cached preview that’s shown has the video loaded, and is quickly replaced with an unready one with the response from the server.

Any ideas about what’s going on?

2

Are you using Safari, by chance? If so, it might be this issue (see also: my comment → WebKit bug report).

1 Like
3

Ahah! Nailed it. Brilliant work figuring that out. Thank you!

4

If you’re using Stimulus, here’s a (hopefully temporary) workaround:

// autoimport_controller.js
export default class extends Controller {
   initialize() {
     this.element.replaceWith(this.element.content)
   }
 }

<template data-controller="autoimport">
  <video>…</video>
</template>
3 Likes
5

Oh, neat. Yea, that does the trick. Thank you so much. :pray: