canves 画视频（转）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<video id="video" controls width="270" autoplay>
<source src="http://www.w3school.com.cn/example/html5/mov_bbb.mp4" type='video/mp4'>
<source src="http://www.w3school.com.cn/example/html5/mov_bbb.ogg" type='video/ogg'>
<source src="http://www.w3school.com.cn/example/html5/mov_bbb.webm" type='video/webm'>
</video>
<canvas id="myCanvas" width="270" height="135" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
</body>
<script type="text/javascript">
var v = document.getElementById('video');
var c = document.getElementById('myCanvas');
var ctx = c.getContext('2d');
// 播放
v.addEventListener('play', function() {
var i = window.setInterval(function() {
ctx.drawImage(v, 0, 0, 270, 135);
}, 20); // 每0.02秒画一张图片
}, false);
// 暂停
v.addEventListener('pause', function() {
window.clearInterval(i); // 暂停绘画
}, false);
// 结束
v.addEventListener('ended', function() {
clearInterval(i);
}, false)
</script>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017/06/27 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读