Javascript 在Chrome Mobile的html5画布上绘制带有不可见视频标签的视频帧

我对Android上的HTML5视频和画布（Android的Chrome）有问题。我将帧从视频绘制到画布（使用CanvasRenderingContext2D.drawImage（）。它在桌面浏览器中运行良好，但在Android的Chrome浏览器中不起作用。在android版Chrome中，只有视频元素可见时，它才起作用。我的意思是它确实是可见的：即使元素通过属性可见，但由于页面滚动而不可见，它也不起作用

仅当移动设备视口显示至少1个像素的视频元素时，此示例才有效。如果视频元素完全隐藏-画布不更新

---

所以，我正在寻找解决办法。如何在视频元素不可见时更新画布？

尝试在视频元素上设置以下CSS样式：

position: fixed;
top: 0;
left: 0;
opacity: 0;

这样，无论滚动，它在页面中始终是“可见”的，并且不会占用任何空间，但您就是看不到它

---

这听起来像是一个bug，或者至少是一个非标准行为，所以将不透明度设置为0可能不起作用。您可以尝试将不透明度设置为非常低的值，如0.05，这可能不会太糟糕，尤其是当它只有1x1像素时。

是的，我也遇到了同样的问题。我设置了视频显示：无或按位置隐藏，但一些浏览器无法抓取屏幕，例如：ios 11 safari，win 10中的chrome 67。所以我设置了opacity:0.000001，我检查了指针事件属性的兼容性，我不确定这个方法是否能在大多数支持getUserMedia的浏览器中工作。Ps，这种行为是由于浏览器的安全策略，毕竟有些属性不是规则。

不透明度：0不起作用，你是对的。我现在对视频元素的风格：“位置”：“固定”，“z索引”：800000000，“左”：0，“顶部”：0，“宽度”：“1px”，“高度”：“1px”，“不透明度”：“0.0000000 1”，“指针事件”：“无”[/code]为什么需要高z索引？它仅适用于我的页面。它需要，因为很多元素都是动态创建的，而且视频可能会被其他元素隐藏。