createjs绘制视频
今年第一篇文章，就写个绘制视频教程吧。记得去年很多人在群里问createjs怎么绘制视频，或者说有没有视频的api，确实乍看之下createjs好像确实没有视频方面的api，其实createjs的Bitmap就可以绘制视频，当然播放还是需要video标签。
不废话直接上代码，
先上一个用原生canvas绘制视频的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<video id="video" width="720" height="375" autoplay style="position: absolute" src="chuying.mp4" loop="loop"></video>
<canvas id="myCanvas" width="720" height="375" style="position: absolute;left: 730px"></canvas>
<script>
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, 720, 375);
}, 20); // 每0.02秒画一张图片
}, false);
// 暂停
v.addEventListener('pause', function() {
window.clearInterval(i); // 暂停绘画
}, false);
// 结束
v.addEventListener('ended', function() {
clearInterval(i);
}, false)
</script>
</body>
</html>
演示地址:http://www.ajexoop.com/test/videoPlay/index1.html
第一个视频是由正常video标签播放出来的，第二个视频是由canvas绘制出来的，这个从代码中也可以看的出来。
然后我再放一个用createjs绘制视频的代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{ margin: 0;
padding: 0;}
</style>
</head>
<body>
<video id="video" width="720" height="375" autoplay style="position: absolute" src="chuying.mp4" loop="loop"></video>
<canvas id="myCanvas" width="720" height="375" style="position: absolute;left: 730px;"></canvas>
<script src="createjs-2015.11.26.min.js"></script>
<script>
var canvas = document.getElementById("myCanvas");
var video = document.getElementById("video");
var stage = new createjs.Stage(canvas);
stage.autoClear = false;//这句非常重要 可以防止绘制下来的视频闪烁
var bitmap = new createjs.Bitmap(video);
stage.addChild(bitmap);
var scale = 720/1920;
bitmap.scaleX = scale;
bitmap.scaleY = scale;
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick", stage);
</script>
</body>
</html>
演示地址:http://www.ajexoop.com/test/videoPlay/index2.html
还是跟上一个demo一样，第一个视频是由正常video标签播放出来的，第二个视频是由canvas绘制出来的。不过值的注意的是这里加了一句stage.autoClear = false;为什么要加这句呢？我注释上也写了防止视频闪烁。由于createjs的重绘机制末尾到开头的循环会有一个空挡，默认stage空挡的时候会清空舞台，这就会造成闪烁，如果加了stage.autoClear = false;舞台是不会自动清空的，这样就不会造成闪烁，有兴趣的童鞋可以注释这句试试。
（createjs1.0版本用VideoBuffer类解决了这个bug）
好了代码很简单，也不需要我做详细介绍了吧，最后祝大家新年快乐！
后话：有些刚学前端的同学不太明白为啥在微信这些地方会不能绘制，我这里解释下，原因是弹出的video标签实际上已经脱离了html，所以需要把弹出式的video改成嵌入式的，怎么改成嵌入式呢可以看下这篇文章http://www.ajexoop.com/wordpress/?p=887
然后我这里有个微信可以绘制的demo：
http://www.ajexoop.com/test/videoPlay/index3.html
发表评论