微信video标签截图的坑

video标签截图网上的思路一般是使用canvas来获取视频当前帧的二进制数据，通过获取视频的本身的宽高以及canvas计划中的宽来确定canvas的高度（等比绘图），利用h5的drawImage将视频当前帧绘制到画布中，然后通过canvas的toDataURL()来将画布的画面转换为base64格式的图片，将值赋予img标签，当然也可以直接使用canvas的绘图作为效果来用。

var video = document.getElementById("video");
var canvas = document.createElement("canvas");
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
var ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);//这里的宽高按自己需求修改
var img = doucument.createElement("img");
img.src = canvas.toDataURL("image/png");
document.body.appendChild(canvas);
document.body.appendChild(img);

一步一步按照步骤最终在pc测试大功告成，以为可以松一口气了。拿出手机，打开微信扫一扫，开始我们的测试，what the hell 怎么啥东西都没有，各种百度谷歌上场，没用，没用，不是这个，没用，不是这个，没用。反正怎么调，微信的x5是可以获取到一大段base64的数据，但获取到的base64的数据就是不正常，把数据拿出来放到pc打开全是一片黑屏。
各种累但最终告知无效的方法，后来继续去github找一找，有画布导出图片的，不是我要的，有各种插件，但原理跟我写的一样，只不过考虑更多，测试了还是不行，
后来无意找到个屏幕截图的插件html2canvas,说是可以根据页面的dom进行渲染生成canvas,这个好像可以喔，既然不能直接获取视频的帧数据，那我转换一下思路，直接获取整个页面某个部分的渲染效果总可以吧。 去网站试了一下，好像可以喔，辛辛苦苦看文档下载试一试，还是还是不行，不行，啊啊啊啊啊啊啊啊啊啊，why，看它官网案例运行的挺好的啊，于是又试着直接在官网的页面手动加上video标签测试一下，空白的。再去看文档，没写不能截video标签的图啊，看issue，也有人问过这个问题，不过时间都好久远了，然后还看到有个人提交过一个添加支持video标签的分支，可是实际就是没效果。
没办法，我妥协了。x5(ie6)的bug不是我这种低级程序猿能搞定的。我本来的设计稿的效果预想是 有东西会覆盖在video标签上的，最好当然是能一直悬浮啦，我也试过用x5的同层video播放器，但各种奇葩不稳定的效果（虽然解决了video层级在播放后会保持最高层的问题，可是却不能控制全屏时横竖屏的设定，x5每次进入全屏会自动检测横竖屏，自己做优化，这样也好，我工作量少，但问题是你效果很不稳定，一时横屏，一时竖屏，进入全屏的效果非常之差，先拉伸页面元素，再全屏（因为全屏之前，页面是包含有微信自带的顶部的返回按钮和标题栏，这部分占据的高度绘制全屏后变为0，所以全屏就有一个拉伸的效果了，这效果真的很丑很丑）），既然你效果不稳定，那我自己控制总行了吧，不行，你完全没法控制，它在进入全屏的时候会强制执行它的检测代码，即使你后面再重置横竖屏的值，没用，它会先执行它的，再执行你的，这效果，切切，真的难看。只能不全屏，要全屏就让用户自己点击（默认的用户点击全屏操作很正常的，但你自己控制就…..，问题仅限于安卓，ios的效果不错，自动全屏，播放后返回的video层级也是正常的），接着设计稿，x5的同层播放器表现太奇怪了，还是用原生吧，但原生有个问题就是播放后安卓的层级就保持最高了。所以接下来的思路是想着用一个img获取视频截图，当视频暂停的时候将video隐藏起来，显示视频截图，这样暂停的时候悬浮的元素看起来还是在video上面悬浮的（播放时就不行了，层级就是最高的，改不了就自欺欺人说这叫用户体验，不能让东西盖了播放的视频，O(∩_∩)O哈哈~）

总结：要是在微信用的，video视频截图前端这块现在是搞不了的了，要想实现效果可以让后端配合，让后端自动生成视频截图 ，也不是说当前帧截图，就当视频封面嘛，这个后端处理起来更简单，也没有兼容性问题，我们就直接使用图片算了

50.X5不支持canvas.toDataUrl()的image/jpeg参数，还是转成了默认的png格式请问有什么替换方法吗？

回答：当前确实还不支持…我们在修复
https://www.qianduan.net/qqliu-lan-qi-x5nei-he-wen-ti-hui-zong/