JS工具库封装:Video转换成Canvas

来源:转载

JS工具库封装:Video转换成Canvas

标签(空格分隔): JavaScript


在PC端,IE9+浏览器对原生视频的支持还是很不错的,然而一到了移动端就会各种兼容性的坑爹问题。


在移动端,各大浏览器厂商对视频会植入许多他们自定义的交互方式(如默认全屏播放、视频不能初始化播放、窗口置顶等等),更坑爹的是这些被植入的交互还无法去掉。移动端的视频行内自动播放看起来确实很棘手。


目前主流有两种方法处理移动端的视频播放问题:


一种是改设计和说服需求方,即使视频不能自动播放或者置顶也不影响页面展示的主要体验;


另一种便是使用canvas来替代video。


看起来,canvas像是完美的,没有浏览器厂商任性的植入属性,任由开发者打扮。但是经我们测试后,其实有些低端的Android手机可能会出现卡顿和动画变糊的情况。如果不考虑一些低端手机,还是很值得实践的。


video转canvas的主要原理,是将视频播放的每一帧都绘制到一个canvas中,这样这个canvas连起来看便像是视频动画了。


为了方便日常开发使用,特意稍微封装了一下video转canvas的工具库,具体代码如下:


/*
* video视频转成canvas(兼容至IE8+)
* Author: Zijor Created On: 2017-06-25
*
*使用方法:
*var videoCanvas = new VideoToCanvas(videoDom);
*
*对象的属性:
*暂无。
*
*对象的方法:
*play 播放视频
*pause暂停视频
*playPause播放或暂停视频
*change(src) 切换视频。参数src为切换的视频地址
*/
var VideoToCanvas = (function(window, document) {
function VideoToCanvas(videoElement) {
if(!videoElement) {return;}
var canvas = document.createElement('canvas');
canvas.width = videoElement.offsetWidth;
canvas.height = videoElement.offsetHeight;
ctx = canvas.getContext('2d');
var newVideo = videoElement.cloneNode(false);
var timer = null;
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;
function drawCanvas() {
ctx.drawImage(newVideo, 0, 0, canvas.width, canvas.height);
timer = requestAnimationFrame(drawCanvas);
}
function stopDrawing() {
cancelAnimationFrame(timer);
}
newVideo.addEventListener('play', function() {
drawCanvas();
},false);
newVideo.addEventListener('pause', stopDrawing, false);
newVideo.addEventListener('ended', stopDrawing, false);
videoElement.parentNode.replaceChild(canvas, video);
this.play = function() {
newVideo.play();
};
this.pause = function() {
newVideo.pause();
};
this.playPause = function() {
if(newVideo.paused) {
this.play();
} else {
this.pause();
}
};
this.change = function(src) {
if(!src) {return;}
newVideo.src = src;
};
this.drawFrame = drawCanvas;
}
return VideoToCanvas;
})(window, document);

使用:


<video id="video" controls loop width='300' autoplay webkit-playsinline="true" src='http://www.w3school.com.cn/example/html5/mov_bbb.mp4'></video>
<script>
var video = document.getElementById('video');
new VideoToCanvas(video);
</script>

demo如下:


分享给朋友:
您可能感兴趣的文章:
随机阅读: