您的位置：首页 > 其它

简单地利用canvas载入视频

2018-02-16 08:53 344 查看

canvas加载视频和图片是一样的，使用drawImage，区别就是给一个定时器不停的抓取每帧的画面，放入Canvas画布里面，这个办法有点简单粗暴，原理为：监听了video的play事件，并设置定时器，每20ms调用一次drawImage，当video的ended事件触发时，清除定时器。<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
<video src="p03501roz02.p702.1.mp4" id="video1" width="270" controls autoplay></video>
<canvas id="myCanvas" width="270" height="135"></canvas>
<script>
var v = document.getElementById('video1')
var c = document.getElementById('myCanvas')
var ctx = c.getContext('2d')
// 每20ms画一次图
v.addEventListener('play', function () {
var i = window.setInterval(function () {
ctx.drawImage(v, 0, 0, 270, 135);
if (v.ended) {
clearInterval(i)
}
}, 20)
});
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航