视频操作 · 前端技术总结

![](https://box.kancloud.cn/9b69d6ea2955d0d5e0c9e808a04c75be_629x210.jpg) ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>绘制video</title> </head> <body> <video loop controls autoplay> <source src="image/movie.mp4" type="video/mp4"></source> </video> <canvas></canvas> <script> // 具体脚本 </script> </body> </html> ~~~ 具体脚本 ~~~ var $ = document.querySelector.bind(document); var wth = 360, hgt = 240; $('video').width = wth; $('video').height = hgt; $('canvas').width = wth; $('canvas').height = hgt; var ctx = $('canvas').getContext('2d'); var canvas2 = document.createElement('canvas'); canvas2.width = wth; canvas2.height = hgt; var ctx2 = canvas2.getContext('2d'); // 能够播放事件 $('video').addEventListener('canplay', function() { drawVideo(this, ctx, ctx2, wth, hgt); }); // 播放事件 $('video').addEventListener('play', function() { drawVideo(this, ctx, ctx2, wth, hgt); }); function drawVideo(video, ctx, ctx2, wth, hgt) { if(video.paused || video.ended) { // 如果暂停或关闭 cancelAnimationFrame(rafFlag); } else { ctx2.drawImage(video, 0, 0, wth, hgt); var imgData = ctx2.getImageData(0, 0, wth, hgt), data = imgData.data, brightness; for(var i=0,len=data.length; i<len; i+=4) { var r = data[i], g = data[i + 1], b = data[i + 2]; brightness = (3*r+4*g+b) >>> 3; data[i] = brightness; data[i+1] = brightness; data[i+2] = brightness; } imgData.data = data; ctx.putImageData(imgData, 0, 0); var rafFlag = requestAnimationFrame(function() { drawVideo(video, ctx, ctx2, wth, hgt); }); } } ~~~