下面给大家看几个案列，都是一些问题案列和总结，值得大家参考和研究，因为我用canvas绘制了video，发现效果和直接用video一样。因此还是用了原来video的方式
<div class="commondw videoimg" id="videoimg"></div><video class="vido" id="vidoid" poster="images/photo/video.jpg">
<source src="media/move.mp4" type="video/mp4"></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播放完毕之后，可以传入回调函数！这个的测试地址请点击，但是在安卓的微信、和一些浏览器中还是会弹出新的窗口，很是郁闷！！
canvas绘制video的其他应用
canvas绘制video有很多其他的应用方式，例如我们可以制作视频播放同步模糊背景、视频截图、灰色视频等等。
具体有一篇文章，写的还不错，推荐大家看一下：http://html5doctor.com/video-canvas-magic/
但是这个只能做pc端了，移动端还是有问题的！！！！
相信看了这些案例你已经掌握了方法，更多精彩请关注其它相关文章！
相关阅读：
css3点击显示涟漪特效
css3怎么制作蝴蝶飞舞的动画
怎样用canvas实现小球和鼠标的互动
以上就是移动端video视频播放的问题案例总结的详细内容。