我在Android（Chrome for Android）上遇到HTML5视频和画布问题。我从视频到画布绘制帧（使用CanvasRenderingContext2D.drawImage（））。它适用于桌面浏览器，但不适用于Android版Chrome。在Chrome for Android中，仅当视频元素可见时才有效。我的意思是它真的可见：即使元素可见，但由于页面滚动而不可见 - 它不起作用。
此示例http://html5demos.com/video-canvas仅在移动设备视口显示视频元素的至少1个像素时有效。如果视频元素完全隐藏 - 画布不会更新。
所以，我正在寻找解决方法。如何在视频元素不可见时更新画布？
答案 0 :(得分：0)
尝试在视频元素上设置这些CSS样式：
position: fixed;
top: 0;
left: 0;
opacity: 0;
这样，无论滚动如何，它都将始终在页面中“可见”，并且不会占用任何空间，但你只是看不到它。
这听起来像是一个错误，或者至少是非标准行为，因此将不透明度设置为0可能无效。你可以尝试将不透明度设置为非常低的0.05，这可能不是那么糟糕，特别是如果它只有1x1像素。
答案 1 :(得分：0)
是的，我也遇到了同样的问题。我设置视频显示：无或按位置隐藏，但有些浏览器无法掌握屏幕，例如：ios 11 safari，chrome 67 in win 10.所以我设置了不透明度：0.000001，我检查指针事件属性兼容性，我不确定这种方法是否适用于大多数支持getUserMedia的浏览器。 Ps，这种行为是由于浏览器的安全策略，毕竟有些属性不是规则。