求教，移动端canvas播放视频问题

Question

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);完全不起作用，不知是不是我漏掉哪里，球各位大神指示

Answer 1

估计是视频编码问题，你用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截一次视频- -

Answer 2

兄台你好，公司有意愿做移动端h5视频，但发现移动端的视频控制条这些太难控制，所以想用canvas来模拟一样，和您一样，也是pc端测试ok，移动端测试无效。请问您现在这个问题解决了吗？移动端h5有很好方法来解决兼容问题吗？

Answer 3

同问，楼主解决了这个问题吗？
手机上的浏览器中， chrome是可以的，UC和QQ浏览器一篇空白。

Answer 4

我想知道现在有解决方案么？ 谷歌浏览器可以 uc QQ 都不行

Answer 5

知音啊，虽然是比你迟了3年多发现这个问题，不过确实很蛋疼的，我现在只能被手机浏览器无情的在我播放的视频上插广告