英文:
Background video in Node.js 13
问题
我正在尝试将gif设置为背景，但它不起作用：
在代码中导入GridMatrix并从中提取src，然后我使用video标签尝试在全屏上渲染它。
import React from 'react';
import GridMatrix from '../assets/gridMatrix.gif';
function Home() {
return (
<div>
<video
className="matrix-bg fixed top-0 left-0 w-full h-full z-[-1] object-cover"
autoPlay
loop
muted
>
<source
src={GridMatrix.src}
type="video/gif"
/>
</video>
<main className="container mx-auto py-10 px-4 flex flex-col items-center justify-center">
<h1 className="text-4xl font-bold mb-8 text-white text-center">
UNS Demo
</h1>
<button className="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">
Login
</button>
</main>
</div>
);
}
export default Home;
如果您有任何其他问题，请随时提出。
英文:
I am trying to set up a gif as a background,I get does it not work:
In the code Import GridMatrix and extract the src from it, then I use the video tag to try to render it on fullscreen.
import React from 'react';
import GridMatrix from '../assets/gridMatrix.gif';
function Home() {
return (
<div>
<video
className="matrix-bg fixed top-0 left-0 w-full h-full z-[-1] object-cover"
autoPlay
loop
muted
>
<source
src={GridMatrix.src}
type="video/gif"
/>
</video>
<main className="container mx-auto py-10 px-4 flex flex-col items-center justify-center">
<h1 className="text-4xl font-bold mb-8 text-white text-center">
UNS Demo
</h1>
<button className="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">
Login
</button>
</main>
</div>
);
}
export default Home;
答案1
得分: 1
GIF 文件不是视频文件，它们的 MIME 类型是 image/gif。<video> 标签不会呈现它们。
您可以使用 <img src={GridMatrix.src} /> 嵌入图像，或者将其设置为元素的背景图像，使用 CSS。
如今，网站经常嵌入所谓的 'GIFs'，实际上是视频文件，但请注意，这些通常是 .webm 或 .mp4 文件，都是视频格式，因此与 <video> 兼容。
英文:
GIF files are not video files and the MIME type for them is image/gif. The <video> tag will not render them.
You can embed images using <img src={GridMatrix.src} /> or set it as a background-image with CSS on an element.
Nowadays, websites often embed what they call 'GIFs' that are actually video files, but notice that those are often .webm or .mp4 files, both being video formats, thus compatible with <video>.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论