作者red0whale (red whale)
看板Ajax
标题[问题] 如何解决在Firefox及Safari的「闪烁问题」?
时间Tue Nov 22 16:47:07 2016
以下是程式码：
<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>
我想将<video>目前的影像用每20毫秒一次的方式投射在<div id="img">上，
并使用background-image将图呈现出来。
这在Chrome虽然不会有任何问题，
不过在Firefox及Safari，甚至是IE，其background-image会一直不规律地闪烁，
请问该如何解决这问题?
谢谢
注：此HTML必须上传至Server。此外，该影片必须来自同一个Server上。
--
欢迎各位使用以下网站服务：
http://redwh.al/ (短网址服务)
http://i.redwh.al/ (图片即时上传服务)
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 114.44.11.4
※ 文章网址: https://webptt.com/cn.aspx?n=bbs/Ajax/M.1479804436.A.687.html
※ 编辑: red0whale (114.44.11.4), 11/22/2016 16:51:48