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

项目需求,在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);

1个回答

微信内置浏览器不支持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

yummry
语默大帅锅 回复weixin_38570659: 没有,后来这条路就放弃了。不好意思
一年多之前 回复
weixin_38570659
weixin_38570659 回复yummry: 请问解决问题了么 我也有这个问题
一年多之前 回复
kenvs
kenvs 回复yummry: 忘记是在哪里看到了,确实是没办法绘制的。
接近 2 年之前 回复
yummry
语默大帅锅 谢谢回答!之前就是因为播放全屏的问题转到了canvas绘制video,结果微信这边又不支持。很是郁闷!能确定是x5内核不支持vanvas绘制video吗?去了微信浏览器内核文档上寻找,没有发现类似的。是在哪里看过这方面的吗?这篇文章之前解决全屏问题时也已经看过了,跟项目的要求不是太符合。整的很恶心啊!
接近 2 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问