Question

为什么我可以在gss中将gif设置为背景图片url（），但是不能将视频mp4设置为背景网址？

我尝试了所有内容，甚至设置url指向svg，其中包含外部对象视频，在src属性中编码为base64。但是不会工作。

我不需要视频bcg作为html中的视频元素，我需要的确如此，因为我可以使用继承背景和选择器之前模糊孩子们的内容。

Answer 1

CSS背景和背景图像属性仅接受颜色，渐变，位图和SVG作为值。

我们可以创建一个简单的HTML5视频元素并将其放在容器元素中。将首先显示海报属性中使用的图像，然后在加载时将其替换为视频的第一帧。因此，最好将视频的第一帧用作海报图像。

Answer 2

以下是一些适用于我的视频背景代码：

在html中：

Set

和css：

 <video autoplay loop id="video-background" muted plays-inline>
    <source src="<yourvideo>" type="video/mp4">
 </video>

Answer 3

对于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/

Answer 4

您可以通过在url()元素播放媒体，在<video>元素处绘制播放视频并调用<canvas>来设置{{}来在CSS .toDataURL()处绘制视频播放在background元素<{1}}事件的data URI的{{1}}元素的1}}

＆＃13;

timeupdate

＆＃13;

Answer 5

Firefox实现了CSS element()功能，允许使用-moz-element()或{{3}将<canvas>元素设置为background或background-image属性}}

element() CSS函数定义生成的Document.mozSetImageElement()值来自任意HTML元素。这个图像是实时的，这意味着如果 HTML元素被更改，CSS属性使用结果值会自动更新。

我们可以使用.drawImage()和requestAnimationFrame()将<video>绘制到<canvas>上<image>，html5: display video inside canvas，这会呈现实时Feed <video>播放的内容，例如<div>元素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>

为什么我可以在gss中将gif设置为背景图片url（），但是不能将视频mp4设置为背景网址？

5 个答案: