如何在视频 html5 上回退到 Gif 但不事先下载 gif？

Question

我将 gif 转换为视频以减小 gif 的大小。但是，我将 gif 作为后备图像包含在内。

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

这是 JSFiddle https://jsfiddle.net/pjqL299w/

我只看到黑色方块，没有图像回退。

Answer 1

创建一个错误事件侦听器，类似这样。它也记录在这里：

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);

如何在视频 html5 上回退到 Gif 但不事先下载 gif？

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

html

javascript

video