为什么我可以在css中设置gif为背景图片url()，却不能设置视频mp4为背景url？
我尝试了一切，甚至将 url 设置为指向 svg，其中包含在 src 属性中编码为 base64 的异物视频。但不会工作。
我不需要视频 bcg 作为 html 中的视频元素，我正是需要它，因为我可以使用继承背景和选择器之前模糊子项的内容。
【问题讨论】：
url() 设置时播放视频？
标签： javascript html css video
CSS background 和 background-image 属性只接受颜色、渐变、位图和 SVG 作为值。
我们可以创建一个简单的 HTML5 视频元素并将其放置在容器元素中。在海报属性中使用的图像将首先显示，然后在加载时被视频的第一帧替换。因此，最好将视频的第一帧用作海报图片。
【讨论】：
您可以通过在<video> 元素处播放媒体，在<canvas> 元素处绘制正在播放的视频并调用.toDataURL() 将元素的background 设置为data URI 在CSS url() 处绘制视频播放timeupdate <video> 元素的事件
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div></div>
<script>
(async() => {
let div = document.querySelector("div");
let url = "https://nickdesaulniers.github.io/netfix/demo/frag_bunny.mp4#t=10,20";
let video = document.createElement("video");
let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");
video.oncanplay = function() {
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
div.style.width = video.videoWidth + "px";
div.style.height = video.videoHeight + "px";
this.play();
}
video.ontimeupdate = function() {
ctx.drawImage(this, 0, 0);
let dataURI = canvas.toDataURL();
div.style.background = `url(${dataURI})`;
}
let mediaBlob = await fetch(url).then(response => response.blob());
video.src = URL.createObjectURL(mediaBlob);
})()
</script>
</body>
</html>【讨论】：
requestAnimationFrame 替换为timeupdate 事件以在CSS url() 函数中绘制data URI。
requestAnimationFrame 替换timeupdate 事件的<video> 元素？
<video> 元素的视频播放中显示 HTML 内容叠加，例如，字幕或副标题？
Firefox 实现了 CSS element() 函数，它允许使用 -moz-element() 或 Document.mozSetImageElement() 将 <canvas> 元素设置为 background 或 background-image 属性
element()CSS 函数定义了一个生成的<image>值 来自任意 HTML 元素。此图像是实时的，这意味着如果 HTML 元素已更改，使用结果的 CSS 属性 值会自动更新。
我们可以使用.drawImage() 和requestAnimationFrame() 将<video> 绘制到<canvas> 上，请参阅html5: display video inside canvas、Drawing video on canvas，这会呈现<video> 播放的实时提要，例如@987654341 @元素CSS background-image属性。
const div = document.querySelector("div");
const canvas = document.createElement("canvas");
document.body.appendChild(canvas);
const ctx = canvas.getContext("2d");
const video = document.createElement("video");
video.id = "video";
canvas.id = "canvas";
canvas.style.display = "none";
canvas.width = 320;
canvas.height = 280;
div.style.width = canvas.width + "px";
div.style.height = canvas.height + "px";
let raf;
const draw = () => {
if (video.paused || video.ended) {
window.cancelAnimationFrame(raf);
return;
}
ctx.drawImage(video, 0, 0, 320, 280);
raf = window.requestAnimationFrame(draw);
}
video.oncanplay = () => {
if ("mozSetImageElement" in document) {
div.style.backgroundImage = "-moz-element(#canvas)";
video.play();
draw();
}
}
video.src = "https://meeseeks.gamepedia.com/media/meeseeks.gamepedia.com/a/a6/Big-buck-bunny_trailer.webm";div {
text-align: center;
font-family: monospace;
font-size: 24px;
color: gold;
text-shadow: 1px 1px 1px red;
}<div>
div element
</div>【讨论】：
这是一些对我有用的视频背景代码：
在html中：
<video autoplay loop id="video-background" muted plays-inline>
<source src="<yourvideo>" type="video/mp4">
</video>
在css中：
#video-background {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 75%;
width: auto;
height: auto;
z-index: -100;
}
【讨论】：
对于 bg 中的视频，您应该在 html5 中使用 video 标签！
这是全屏视频代码：
<div class="fullscreen-bg">
<video loop muted autoplay poster="img/videoframe.jpg" class="fullscreen-bg__video">
<source src="video/big_buck_bunny.webm" type="video/webm">
<source src="video/big_buck_bunny.mp4" type="video/mp4">
<source src="video/big_buck_bunny.ogv" type="video/ogg">
</video>
还有几行简单的 CSS：
.fullscreen-bg { position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; z-index: -100; } .fullscreen-bg__video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
来源：https://slicejack.com/fullscreen-html5-video-background-css/
【讨论】：