3

有没有办法将我放在我的 html 页面背景中的视频定位并使其重复，就像我使用background-*css 属性对图像/gif 所做的那样？我确信这在当前版本的 CSS 中是不可能的，但也许有一种方法可以用 JavaScript 做到这一点。该视频最初是 gif，而我正在尝试使用 gif 进行操作，但我将其转换为 webm 和 mp4 以提高加载性能并节省带宽。下面是如果我的视频是 gif 我会做什么的代码，然后是我目前拥有的代码并且想要复制“Video as Gif”的代码。

视频作为 Gif

body {
    background: url('https://media3.giphy.com/media/KZFrf9JusXzmpnPsT6/giphy.gif?cid=ecf05e47nlo6zhk89xm58aaee38kzq5tddoko195kri6hv0e&rid=giphy.gif') center center;
  background-repeat: repeat;
  position: relative;
  background-size: auto;
  overflow: hidden;
    width: 100%;
}
<html>
<body>
</body>
</html>

GIF 视频

#video-background {
    top: 0;
    left: 0;
  position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: repeat;
    overflow: hidden;
}
  <div id="video-background">
    <video aria-hidden="true" playsinline="" autoplay="" muted="" loop=""> <source src="//starlink.ua/media/mod_starlink/car-blur.webm" type="video/webm"> <source src="//starlink.ua/media/mod_starlink/car-blur.mp4" type="video/mp4"></video>
  </div>

4

2 回答 2

0

有没有办法将我放在我的 html 页面背景中的视频定位并使其重复，就像我使用 background-* css 属性对图像/gif 所做的那样？

我不这么认为。

您可以使用 JS 克隆视频元素的次数与填充屏幕所需的次数一样多。*请注意，您需要处理窗口大小调整。

https://jsfiddle.net/ajd62q5t/

const videoWidth = 480;
let videoHeight = 0;
let grid;
let ww = window.innerWidth;
let wh = window.innerHeight;

const elWrapper = document.querySelector("#video-background > div");
const elVideo = elWrapper.querySelector("video");

elVideo.addEventListener(
  "loadeddata",
  () => {
    setVideoHeight();
    generateVideoGrid();
    updateStyles();
  },
  false
);

function setVideoHeight() {
  const aspectRatio = elVideo.videoWidth / elVideo.videoHeight;
  videoHeight = videoWidth / aspectRatio;
}

function generateVideoGrid() {
  let cols = 1;
  let rows = 1;

  if (ww > videoWidth) {
    cols = Math.ceil(ww / videoWidth);
    if (cols % 2 === 0) {
      cols++;
    }
  }

  if (wh > videoHeight) {
    rows = Math.ceil(wh / videoHeight);
    if (rows % 2 === 0) {
      rows++;
    }
  }

  const copies = cols * rows;
  for (let i = 1; i < copies; i++) {
    const clone = elVideo.cloneNode(true);
    elWrapper.appendChild(clone);
  }

  grid = [cols, rows];
}

function updateStyles() {
  document.documentElement.style.setProperty(
    "--video-width",
    `${videoWidth}px`
  );
  document.documentElement.style.setProperty(
    "--video-height",
    `${videoHeight}px`
  );

  document.documentElement.style.setProperty("--video-bg-grid-cols", grid[0]);
  document.documentElement.style.setProperty("--video-bg-grid-rows", grid[1]);
  
  elWrapper.classList.add('ready');
}
#video-background {
  top: 0;
  left: 0;
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  
  /* Center the grid */
  display: flex;
  justify-content: center;
  align-items: center;
}

#video-background > div {
  display: grid;
  grid-template-columns: repeat(var(--video-bg-grid-cols), var(--video-width));
  grid-template-rows: repeat(var(--video-bg-grid-rows), var(--video-height));
  opacity: 0;
  transition: opacity 2s ease;
}

#video-background > div.ready {
 opacity: 1;
}

video {
  display: block;
  height: var(--video-height);
  width: var(--video-width);
}
<div id="video-background">
  <div>
    <video aria-hidden="true" playsinline="" autoplay="" muted="" loop="">
      <source src="//starlink.ua/media/mod_starlink/car-blur.webm" type="video/webm">
      <source src="//starlink.ua/media/mod_starlink/car-blur.mp4" type="video/mp4"></video>
  </div>
</div>

于 2020-09-03T22:13:46.180 回答
0

HTML

<video autoplay loop muted id="bgvideo">
    <source src="YOUR VIDEO SOURCE">
  </video>

CSS

#bgvideo {
  position: fixed;
  min-height: 100%;
  min-width: 100%;
  z-index: -100; }

这将使您的视频在后台自动播放，Z 索引将允许您对视频进行新的更改，视频将完全位于后面，您的新元素位于前面。

于 2020-09-07T03:50:04.947 回答