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>