Question

<video id="movie" preload autoplay loop style="display: none;">
    <source src='example.mp4' type='video/mp4' />
</video>

<canvas id="myCanvas" style="display: none;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<div id="img" class="img" style="width: 100px; height: 100px;"></div>

<script>
    var v=document.getElementById("movie");
    var c=document.getElementById("myCanvas");
    var a=document.getElementById("img");
    var ctx=c.getContext('2d');
    var i;

    i=window.setInterval(function() {
        ctx.drawImage(v,0,0,90,90);

        var img_tag = new Image();
        var img = c.toDataURL();
        img_tag.onload = function() {
            a.style.backgroundImage="url("+img+")";
        }
        img_tag.src = img;
    },20);
</script>

我试图通过使用javascript将视频的当前帧每20毫秒抛到<div id='img'>。我提到了以下问题：

How to prevent a background image flickering on change

提问者和我有同样的问题。我已经应用了他的解决方案，就像上面的代码一样，但问题仍然存在。虽然闪烁问题似乎不会发生在Chrome中，但它仍会出现在Firefox和Safari中，即使在IE中也是如此。我该如何解决这个问题？

P.S。 HTML必须上传到服务器。此外，视频必须来自同一台服务器。

如何防止Firefox和Safari中闪烁的背景图像？

0 个答案: