使用canvas绘制动态视频 :
每20毫秒,代码就会复制视频的当前帧:
var v = document.getElementById('video1')
var c = document.getElementById('myCanvas')
ctx = c.getContext('2d')
v.addEventListener('play', function () {
var i = window.setINterval(function () {
ctx.drawImage(v, 0, 0, 270, 135)
}, 20)
}, false)
v.addEventListener('pause', function () {
window.clearInterval(i)
}, false)
v.addEventListener('ended', function () {
clearInterval(i)
})