javascript - 求教,移动端canvas播放视频问题
本文介绍了javascript - 求教,移动端canvas播放视频问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
1、我在w3c上看到了canvas有个方法叫drawImage(video, x, y, w, h);
于是我是实验了一下
var v=document.getElementById("video1");
var c=document.getElementById("myCanvas");
var ctx=c.getContext('2d');
v.addEventListener('play',function() {
var i = window.setInterval(function() {
ctx.drawImage(v, 0, 0, 270, 135);
}, 20);
},false);
v.addEventListener('pause',function() {window.clearInterval(i);},false);
v.addEventListener('ended',function() {clearInterval(i);},false);
}
发现PC端画布是可以播放视频的,于是兴奋的拿起手机测试,结果GG了,画布一片空白,
为了测试是不是画布问题,我加上图片,用画布去画图片,同样的drawImage()方法,图片成功画出来了,于是可以断定画布没问题,又怀疑是手机原因,换了几个浏览器还是一样,又换了几个手机,我的结果是绝望了
难道移动端画布是画不了视频的么,drawImage(video, x, y, w, h);完全不起作用,不知是不是我漏掉哪里,球各位大神指示
解决方案
估计是视频编码问题,你用w3c例子上的视频试试
<source src="http://www.w3school.com.cn/example/html5/mov_bbb.mp4" type="video/mp4">
<source src="http://www.w3school.com.cn/example/html5/mov_bbb.ogg" type="video/ogg">
<source src="http://www.w3school.com.cn/example/html5/mov_bbb.webm" type="video/webm">
20ms截一次视频- -
这篇关于javascript - 求教,移动端canvas播放视频问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文