在 HTML Canvas 上播放视频
Posted
技术标签:
【中文标题】在 HTML Canvas 上播放视频【英文标题】：Playing video on HTML Canvas 【发布时间】：2021-12-17 12:07:54 【问题描述】：我正在尝试将视频播放到 html 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>【问题讨论】：
【参考方案1】：首先，使用 $('#sourcevideo').css('visibility', 'hidden'); 隐藏视频容器的可见性，然后您将看到静止图像，以防止使用 autoplay="autoplay"，这样做您的视频元素将隐藏，您的画布也将正确运行视频。
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>【讨论】：
这真的很接近我正在寻找的东西，但是有没有办法摆脱现在隐藏的视频元素留下的“空白空间”？ @ArtemisJ 现在检查更新的答案，我刚刚移动了 div【参考方案2】：您可以设置一个包含display: none 样式的CSS 类以应用于video 元素（如下面的代码所示，.hidden display:none;）。由于视频元素的类是在 HTML 中设置的，因此它应该隐藏视频元素，但在页面加载时仍会播放带有 autoplay 的视频。
下面的代码显示了如何根据需要在不同的类中应用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>【讨论】：
感谢您的详细回复。上面的内容在附加到按钮时有效，但在不被按钮调用而只是作为事件（如加载数据）时，它并不完全有效（至少正如我希望的那样）。因此，为了扩展和阐明所需状态，最终用户“可见”并占用网页空间的唯一内容是画布元素，该元素已在其上“绘制”了源视频。我能来的最接近的是其他海报的建议，并在 sourcevideo 上使用 style.visibility 来隐藏它，但在这种情况下它仍然留下一个空白区域 是的，visibility: hidden 和display:none 之间的区别在于visibility: hidden 保留了元素所在的块空间，包括宽度和高度。 display: none 样式没有。我刚刚更新了我的答案以在开始时包含此内容，而不是按需添加按钮。以上是关于在 HTML Canvas 上播放视频的主要内容，如果未能解决你的问题，请参考以下文章