在Chrome Mobile的html5画布上使用隐形视频标签绘制视频帧

Question

我在Android（Chrome for Android）上的HTML5视频和画布上遇到问题。我从视频画布画框（使用CanvasRenderingContext2D.drawImage（））。它适用于桌面浏览器，但不适用于Android版Chrome。在Android版Chrome中，只有在视频元素可见的情况下才能使用。我的意思是它真的可见：即使元素可见属性但由于页面滚动不可见 - 它不起作用。

此示例http://html5demos.com/video-canvas仅在移动设备视口显示至少1个视频元素像素的情况下有效。如果视频元素完全隐藏 - 画布不更新。

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

Answer 1

试试你的视频元素上设置这些CSS样式：无论

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

这样，它永远是“看得见”的页面，滚动的，它不会占用任何空间，但你只是不会看到它。

这听起来像一个错误，或者至少是一个非标准的行为，所以将不透明度设置为0可能无法正常工作。你可以尝试将不透明度设置为0.05等非常低的值，这可能不是那么糟糕，特别是如果它只有1x1像素。