2

I have a problem with HTML5 video and canvas on Android (Chrome for Android). I draw frames from video to canvas (using CanvasRenderingContext2D.drawImage()). It works fine in desktop browsers, but not in Chrome for Android. In Chrome for android it works only if video element visible. I mean it really visible: even if element visible by properties but not visible due to page scroll - it doesn't work.

This example http://html5demos.com/video-canvas works only if mobile device viewport shows at least 1 pixel of video element. If video element fully hidden - canvas doesn't update.

So, I'm looking for workaround. How to make canvas update when video element is invisible?

4

2 回答 2

0

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

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

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

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

于 2014-02-19T14:17:39.023 回答
0

是的，我也遇到了同样的问题。我设置video display:none或者按位置隐藏，但是有些浏览器不能抓屏，例如：ios 11 safari，chrome 67 in win 10.所以我设置了 opacity:0.000001,我检查了pointer-events 属性的兼容性，我不确定这个方法是否适用于大多数支持getUserMedia 的浏览器。Ps，这种行为是由于浏览器的安全策略，毕竟有些属性不是规则。

于 2018-04-26T01:41:49.703 回答