定位视频并使其像图像一样在背景中重复

Posted

技术标签:

【中文标题】定位视频并使其像图像一样在背景中重复【英文标题】：Position video and make it repeat in background like images 【发布时间】：2020-11-21 12:26:15 【问题描述】：

有没有办法像使用background-* css 属性处理图像/gif 一样，定位我放在html 页面背景中的视频并使其重复？我确信这在当前版本的 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>

【问题讨论】：

【参考方案1】：

有没有办法将我放在我的 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",
    `$videoWidthpx`
  );
  document.documentElement.style.setProperty(
    "--video-height",
    `$videoHeightpx`
  );

  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>

【讨论】：

加载是什么意思？ 对不起，我的意思是提高性能。当我运行 jsfiddle 并增加控制台的屏幕大小时，虽然它创建了更多的克隆视频，但它占用了大量的 CPU。那么有没有一种方法可以在不占用太多处理的情况下运行您的实现？ 对了。是的，我也注意到了。我不确定，但我认为这是因为他们都在同时播放？我会看看它。您可以选择将视频拼接成一个视频吗？ 另一种选择是使用画布生成背景？ 如果您可以使用 GIF，我认为这是迄今为止最简单的解决方案。您可以使用将视频转换为 GIF 的服务。像 Cloudinary 之类的东西（它有一个不错的免费等级）。不过我不确定质量 > cloudinary.com/documentation/videos_to_animated_images【参考方案2】：

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 index 将允许您对视频进行新的更改，视频将完全位于后面，您的新元素位于前面。

【讨论】：

以上是关于定位视频并使其像图像一样在背景中重复的主要内容，如果未能解决你的问题，请参考以下文章

背景图像在视频背后的整个身体后面不可见[重复]

iOS 如何手动调整 UIImageView 使其像按钮一样？

如何在Textview中检测网站链接并使其可点击[重复]

从图像中删除白色背景并使其透明

Rails html 视图，定位一个元素并使其仅对一个视图不可见。

Laravel 8 - MS SQL - 查询生成器 - 使用 DB Raw。尝试使代码正确，使其像工作的 MSSQL 代码一样工作