canvas加载视频和图片是一样的，使用drawImage，区别就是给一个定时器不停的抓取每帧的画面，放入Canvas画布里面，这个办法十分的简单粗暴。（粗粗粗粗~~~）
而且可以达到神同步，当视频暂停，canvas里面的视频就暂停，当视频再次开始播放，canvas里面的视频也再次播放。
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<video id="video1" width="270" autoplay src="11.mp4"></video>
<canvas id="myCanvas" width="270" height="135"></canvas>
</body>
</html>js:
<script>
var v = document.getElementById("video1");
var c = document.getElementById("myCanvas");
ctx = c.getContext('2d');
//每20毫秒画一次图
v.addEventListener('play', function() {
var i = window.setInterval(function() {
ctx.drawImage(v, 0, 0, 270, 135);
//打印当前视频的播放时间
console.log(v.currentTime);
//当视频结束的时候去掉循环
if(v.ended){
clearInterval(i)
}
}, 20);
}, false);
//将视频暂停，然后观察canvas里面的效果
setTimeout(function(){
v.pause();
},4000);
//将视频播放，然后观察canvas里面的效果
setTimeout(function(){
v.play();
},7000)
</script>
4482
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
