canvas绘制视频在x5内核中不显示

项目需求,在canvas中实时绘制video中的视频。百度了方法是同伙定时器实时的绘制video的每一帧画面。
在测试时发现在x5内核中canvas无法显示所绘制的画面,在手机自带浏览器,和PC端中则正常使用。有没有兄弟碰到过类似的请求支援!

 var videoObj = $("#video")[0];
    var ctx=$("#canvas")[0].getContext('2d');
    var fps = 1000/30;
    var timer = null;
    timer=window.setInterval(function() {
            ctx.drawImage(videoObj,-85,-150,170,300);
    },fps);

微信内置浏览器不支持canvas绘制video,最好的做法是使用dom和canvas混合开发。

<video src="test.mp4" x-webkit-airplay="allow" x5-video-player-type="h5" x5-video-player-fullscreen="true" playsinline webkit-playsinline preload="auto" x5-video-orientation="portraint"></video>

添加了 x5-video-player-type 和 x5-video-player-fullscreen 就能让video在安卓内全屏,且video上可以放置其他元素。playsinline 和 webkit-playsinline 可以让video在ios内内联播放。前提是你得把视频放在腾讯服务器或者上传到腾讯视频。

附上一个觉得不错的文章:https://segmentfault.com/a/1190000006857675#articleHeader0