html5 vedio播放器移动端卡顿,移动端video视频播放的痛

痛点

前面我写了一篇婚礼邀请函 动画方面的总结文章，但是一直没有对其中视频播放页面做一个总结。因为我一直没有找到真正做好“视频障眼法”的好的方法。安卓很多浏览器播放视频都会新开窗口，甚至播放完毕会有类似播放器的那种推荐广告，让我很是头疼。我一度以为用canvas绘制视频，应该可以解决这个问题，但是当我用canvas绘制完了视频之后，在微信中播放还是一样弹出新的播放窗口！！这就是移动端video视频播放的痛！

失败案例一：

也就是我目前邀请函用的方式，因为我用canvas绘制了video，发现效果和直接用video一样。因此还是用了原来video的方式，代码如下：

$("#videoimg").on("click", function () {

$(this).fadeOut(1000);

$(".clicktips").hide();

$("#vidoid").show();

$("#vidoid")[0].play();

$("#vidoid").bind('ended', function () {

$("#vidoid").hide();

$("#videoimg").show();

})

});

但是浏览器中还是没有问题的，和canvas绘制一样！点击体验原生video版障眼法视频

失败案例二(canvas渲染video)

后来我想到用canvas渲染video，也就是通过canvas的drawImage方式,结合requestAnimationFrame动画，requestAnimationFrame动画我之前制作婚礼邀请函总结的时候也介绍过。

下面贴出代码

function VideoToCanvas(videoElement,fn) {

if (!videoElement) {

return;

}

var fn=fn||"";

var canvas = document.createElement('canvas');

canvas.width = videoElement.offsetWidth;

canvas.height = videoElement.offsetHeight;

var 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);

}

function endedCallBack(){

cancelAnimationFrame(timer);

fn && fn()

}

newVideo.addEventListener('play', function () {

drawCanvas();

}, false);

newVideo.addEventListener('pause', stopDrawing, false);

newVideo.addEventListener('ended', endedCallBack, false);

videoElement.parentNode.replaceChild(canvas, videoElement);

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;

this.show = function () {

canvas.style.display = "block";

}

this.hide = function () {

canvas.style.display = "none";

}

}

封装了显示show()、隐藏hide()、播放play()、暂停pause()、更换地址change()以及切换播放和暂停playPause()；

使用方法如下：

var canvasvedio=new VideoToCanvas(document.getElementById("vidoid"),function(){

canvasvedio.hide();

$("#videoimg").show();

});

canvasvedio.play();

还有一个回调函数，就是在canvas播放完毕之后，可以传入回调函数！这个的测试地址请点击，但是在安卓的微信、和一些浏览器中还是会弹出新的窗口，很是郁闷！！

别人的成功案例

看到这个地址，这个在微信中是成功的，没有弹出新的窗口？这是为什么呢？

研究了半天，搜索了一些资料，才明白，因为这个地址是QQ域名下面的。被微信浏览器做了一种特殊的解析！这不是很坑爹吗？

canvas绘制video的其他应用

canvas绘制video有很多其他的应用方式，例如我们可以制作视频播放同步模糊背景、视频截图、灰色视频等等。

但是这个只能做PC端了，移动端还是有问题的！！！！