Как сохранить HTML5 видео рендеринг, когда вне поля зрения? - PullRequest
Новая
       25

Как сохранить HTML5 видео рендеринг, когда вне поля зрения?

0 голосов
/ 16 января 2020

Вкл. Chrome для Android (и в режиме эмуляции устройства на рабочем столе Chrome), когда <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>

1 Ответ

1 голос
/ 16 января 2020

Видео со звуком не будет автоматически приостанавливаться, поэтому в некоторых случаях звук может быть отключен, но даже установка громкости на 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>
...