How to fallback to Gif on video html5 but don't download the gif beforehand?

Question

I converted a gif to video to reduce the size of the gif. However, I included the gif as a fallback image.

<video  autoplay="" loop="">
    <source src="broken_video_link" type="video/mp4"/>
    <img src="http://placekitten.com/600/220" />
</video>

Here's JSFiddle https://jsfiddle.net/pjqL299w/

What I only see is just black square and no image fallback.

Answer 1

Create a error event listener, something like this. It is also documented here:

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video

var v = document.querySelector('video'),
    sources = v.querySelectorAll('source'),
    lastsource = sources[sources.length - 1];
lastsource.addEventListener('error', function (ev) {
    var d = document.createElement('img');
    d.src = "http://placekitten.com/600/220";
    d.innerHTML = v.innerHTML;
    v.parentNode.replaceChild(d, v);
}, false);