'VueJS replace video with a default placeholder on error

I'm new to front end (vue). Would love to hear some feedback

I have a video playing on loop. It works fine if the url is good. But if the url is not found, I want to replace it with a placeholder (could be an image). I've tried:

<video autoplay="autoplay" muted loop>
    <source :src="url" type="video/mp4" @error="replaceWithPlaceholder">
</video>

replaceWithPlaceholder(e) {
    e.target.src = defaultUrl
},

I've done this the exact same way with an image, but Im not sure why it isnt working for a video. What am I doing wrong?

javascripthtmlvue.js


Solution 1:[1]

figured it out by using poster

<video autoplay="autoplay" muted loop poster="defaultUrl">

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ugotcigs

Related Questions