update src of audio or video

[FrancoisDucobu]

Hello everyone,

I discovered alpinejs two weeks ago and i'm loving it.
I was stuck with jquery for a while and using react or vue for small project was not practical.

There is a tiny thing I don't understand.
I would like to change the src prop on a video element.
But It does not seemed to work...

here is my code

<video autoplay loop muted class="absolute z-10 w-auto min-w-full min-h-full max-w-none">
    <source :src="data.video" type="video/mp4" />
</video>

Do you have any advice or idea to help me ?

Thanks,
Regards,

Francois

[SimoTod]

it's the default behaviour (not an alpine thing). if you want to change the source at runtime, you need to call the load() method on the video tag. Something like

<video autoplay loop muted class="absolute z-10 w-auto min-w-full min-h-full max-w-none"  x-init="$watch('data.video', () => $el.load())">
    <source :src="data.video" type="video/mp4"/>
</video>

[SimoTod]

https://codepen.io/SimoTod/pen/XWgvqbj does it work for you?

[FrancoisDucobu]

Yep it works.
But the video inside the original x-data does not work when the page load.
It works when I click on the button.

I found a workaroud.
I set a ref inside my video tag.
On the parent div, where x-data is set, i put an x-init="$refs.video.load()"
And it works... but strange behavior...

[SimoTod]

Must be browser related, the first video works for me 🤷‍♂️

[SimoTod]

I've updated the example, you can also use x-effect (so you don't need to add a ref, x-effect runs on init and every time a variable in the callback changes)

[FrancoisDucobu]

Yeah it did the trick with the x-effect.

Many thanks SimoTod !!!

Have a nice day 😊