正在 HTML Canvas 上播放视频

Question

我正在尝试向 HTML Canvas 播放视频。我没有任何问题，除非我试图隐藏视频源并只显示 canvas。在这种情况下，我只得到一个 'white screen'。如果视频元素没有隐藏，一切都会按预期工作。我不想显示视频元素和 canvas 元素，我只想显示包含视频源 'streaming' 的 canvas 元素。有什么建议么？附上代码示例...

let sourcevideo = document.getElementById("sourcevideo");
let outputcanvas = document.getElementById("outputcanvas");
let canvasctx = outputcanvas.getContext("2d");

function initCanvas() {
  outputcanvas.width = sourcevideo.videoWidth;
  outputcanvas.height = sourcevideo.videoHeight;
  console.log(outputcanvas.width, outputcanvas.height);
  drawVideo();
}

function drawVideo() {
  canvasctx.drawImage(
    sourcevideo,
    0,
    0,
    outputcanvas.width,
    outputcanvas.height
  );
  requestAnimationFrame(drawVideo);
}

sourcevideo.addEventListener("loadeddata", initCanvas);

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <div id="videocontainer">
    <video id="sourcevideo" controls src="https://upload.wikimedia.org/wikipedia/commons/transcoded/c/c4/Physicsworks.ogv/Physicsworks.ogv.240p.vp9.webm"></video>
  </div>
  <canvas id="outputcanvas"></canvas>
</body>

</html>

Answer 1

首先，使用此 $('#sourcevideo').css('visibility', 'hidden'); 隐藏视频容器的可见性，然后您将看到静止图像，以防止使用 autoplay="autoplay"，通过这样做，您的视频元素也会隐藏您 canvas 将正确运行视频。

let sourcevideo = document.getElementById("sourcevideo");
let outputcanvas = document.getElementById("outputcanvas");
let canvasctx = outputcanvas.getContext("2d");

function initCanvas() {
  outputcanvas.width = sourcevideo.videoWidth;
  outputcanvas.height = sourcevideo.videoHeight;
  console.log(outputcanvas.width, outputcanvas.height);
  drawVideo();
}

function drawVideo() {
  canvasctx.drawImage(
    sourcevideo,
    0,
    0,
    outputcanvas.width,
    outputcanvas.height
  );
  requestAnimationFrame(drawVideo);
}
sourcevideo.addEventListener("loadeddata", initCanvas);
sourcevideo.style.visibility = 'hidden';

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <div>
    <canvas id="outputcanvas"></canvas>
  </div>
  <div id="videocontainer">
    <video id="sourcevideo" autoplay="autoplay" controls src="https://upload.wikimedia.org/wikipedia/commons/transcoded/c/c4/Physicsworks.ogv/Physicsworks.ogv.240p.vp9.webm"></video>
  </div>

</body>

</html>

Answer 2

您可以设置 CSS class，其中包含要应用于 video 元素的 display: none 样式（如下面的代码所示，.hidden {display:none;}).由于视频元素的 class 是在 HTML 中设置的，因此它应该隐藏视频元素，但在页面加载时仍以 autoplay 播放视频。

下面的代码显示了如何根据需要在不同的 class 中应用 display: none 或 visibility: hidden（在此示例中使用按钮）。

const sourcevideo = document.getElementById("sourcevideo");
const outputcanvas = document.getElementById("outputcanvas");
const canvasctx = outputcanvas.getContext("2d");

function initCanvas() {
  outputcanvas.width = sourcevideo.videoWidth;
  outputcanvas.height = sourcevideo.videoHeight;
  drawVideo();
}

function drawVideo() {
  canvasctx.drawImage(
    sourcevideo,
    0,
    0,
    outputcanvas.width,
    outputcanvas.height
  );
  requestAnimationFrame(drawVideo);
}

sourcevideo.addEventListener("loadeddata", initCanvas);

.hidden {
  display: none;
}

<div id="videocontainer">
  <canvas id="outputcanvas"></canvas>
  <video id="sourcevideo" class="hidden" controls autoplay src="https://upload.wikimedia.org/wikipedia/commons/transcoded/c/c4/Physicsworks.ogv/Physicsworks.ogv.240p.vp9.webm"></video>
</div>

正在 HTML Canvas 上播放视频

Playing video on HTML Canvas

javascript

html5-video

html5-canvas