Position 视频并使其像图像一样在背景中重复
[英]Position video and make it repeat in background like images
问题描述
Is there a way to position a video that I put in the background of my html page and make it repeat as I would do with an image/gif using the background-* css properties?
有没有办法 position 一个视频，我把它放在我的 html 页面的背景中，并让它重复，就像我使用background-* css 属性对图像/ gif 所做的那样？ I'm sure this isn't possible with the current version of CSS but maybe there is a way to do it with JavaScript.我确信当前版本的 CSS 不可能做到这一点，但也许有办法使用 JavaScript 来做到这一点。 The video was originally a gif, and what I am trying to do works with a gif, but I converted it to a webm and mp4 to improve load performance and save bandwidth.该视频最初是 gif，而我正在尝试使用 gif 进行操作，但我将其转换为 webm 和 mp4 以提高加载性能并节省带宽。 Below is code of what I would do if my video was a gif and then there is code of what I have currently and want to replicate the code for "Video as Gif".下面是如果我的视频是 gif 我会做什么的代码，然后是我目前拥有的代码并且想要复制“Video as 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 as Video 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>2 个解决方案
解决方案1
0 2020-09-03 22:13:46
Is there a way to position a video that I put in the background of my html page and make it repeat as I would do with an image/gif using the background-* css properties?
I don't think so.我不这么认为。
You can use JS to clone the video element as many times as it takes to fill the screen.您可以使用 JS 克隆视频元素的次数与填充屏幕所需的次数一样多。 *Note you'll need to handle window resize. *请注意，您需要处理 window 调整大小。
https://jsfiddle.net/ajd62q5t/ 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>
解决方案2
0 2020-09-07 03:50:04
HTML HTML
<video autoplay loop muted id="bgvideo">
<source src="YOUR VIDEO SOURCE">
</video>
CSS CSS
#bgvideo {
position: fixed;
min-height: 100%;
min-width: 100%;
z-index: -100; }
This will make your video in the background and will be auto-played, Z index will allow you to make new changes on the video and video will be completely at the back and your new elements in the front.这将使您的视频在后台自动播放，Z 索引将允许您对视频进行新的更改，视频将完全在后面，您的新元素在前面。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.