0

在 Android 版 Chrome 上（以及桌面版 Chrome 上的设备模拟模式），当 a<video>滚动出视图时，浏览器似乎暂停渲染。但是我需要视频继续播放，因为我的代码不断从视频中抓取帧以绘制到<canvas>具有实时视频效果的视频上，即使源视频被滚动出视图，画布仍然可以向用户显示.

下面是一个显示问题的 MCVE。编写 MCVE 是为了简单地将视频复制到画布上，而不应用视频效果。

问题是，一旦视频元素滚动出视图，画布似乎就会冻结，因为它只是一遍又一遍地渲染相同的视频帧。

有没有办法让视频元素即使在屏幕外移动时也能保持播放，或者有另一种方法来解决这个问题？

const video = document.querySelector("video");
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");

function drawFrame() {
    // In the real code, video effects are applied here
    ctx.drawImage(video, 0, 0);
    requestAnimationFrame(drawFrame);
}
drawFrame();

if (video.readyState >= 2) setup();
else video.addEventListener("loadeddata", drawFrame);
.spacer {
  height: 200px;
}
<p>Video Element:</p>
<video src="https://thumbs.gfycat.com/ExemplaryShadowyBuffalo-mobile.mp4" width="640" height="360" autoplay muted loop></video>
<div class="spacer"></div>
<p>Canvas Output Element (with video effects in the real code):</p>
<canvas width="640" height="360"></canvas>

4

1 回答 1

1

有声音的视频不会自动暂停，因此在某些情况下可能会取消视频静音，但即使将音量设置为 0 也会使其表现为静音......所以您还必须体验一些噪音。

但无论如何，这里你当前的视频没有任何音频通道，所以简单地取消静音是行不通的。

然而，要做的是将您的绘图视频保留在 DOM 之外：

// we do clone the visible element, and we keep that clone offscreen
const video = document.querySelector("video").cloneNode();
video.play();
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");

function drawFrame() {
    // In the real code, video effects are applied here
    ctx.drawImage(video, 0, 0);
    requestAnimationFrame(drawFrame);
}
drawFrame();

if (video.readyState >= 2) setup();
else video.addEventListener("loadeddata", drawFrame);
.spacer {
  height: 200px;
}
<p>Video Element:</p>
<video src="https://thumbs.gfycat.com/ExemplaryShadowyBuffalo-mobile.mp4" width="640" height="360" autoplay muted loop></video>
<div class="spacer"></div>
<p>Canvas Output Element (with video effects in the real code):</p>
<canvas width="640" height="360"></canvas>

于 2020-01-16T08:01:46.273 回答