javascript - 在Chrome Mobile中使用不可见视频标签在html5 Canvas 上绘制视频帧

Question

我在 Android(Android 版 Chrome)上遇到 HTML5 视频和 Canvas 问题。我将帧从视频绘制到 Canvas (使用 CanvasRenderingContext2D.drawImage())。它在桌面浏览器中运行良好，但在 Android 版 Chrome 中运行不佳。在 Android 版 Chrome 中，仅当视频元素可见时才有效。我的意思是它确实可见:即使元素通过属性可见但由于页面滚动而不可见 - 它不起作用。

这个例子http://html5demos.com/video-canvas仅当移动设备视口(viewport)显示至少 1 个像素的视频元素时才有效。如果视频元素完全隐藏 - Canvas 不会更新。

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

Answer 1

尝试在您的视频元素上设置这些 CSS 样式:

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

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

这听起来像是一个错误，或者至少是一个非标准行为，因此将不透明度设置为 0 可能不起作用。您可以尝试将不透明度设置为非常低的值，例如 0.05，这可能还不错，特别是如果它只有 1x1 像素。