React中使用video标签设置GIF背景失效问题求助

你的问题出在误用了video标签加载GIF文件——GIF是图像格式，不是视频格式，type="video/gif"是错误的，而且video标签对GIF的兼容性和渲染逻辑不如直接用图像方案可靠。下面给你三种可行的解决办法：

方法1：改用img标签作为背景层 #

直接用img标签渲染GIF，通过定位和层级设置让它成为背景，这是最直接的方案：

import React from 'react';
import GridMatrix from '../assets/gridMatrix.gif';

function Home() {
    return (
        <div>
            <img
                src={GridMatrix}
                className="matrix-bg fixed top-0 left-0 w-full h-full z-[-1] object-cover"
                alt="背景"
            />
            <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;

方法2：用CSS背景图实现 #

直接给容器设置背景图，不需要额外的img/video标签，代码更简洁：

import React from 'react';
import GridMatrix from '../assets/gridMatrix.gif';

function Home() {
    return (
        <div style={{ 
            backgroundImage: `url(${GridMatrix})`,
            backgroundSize: 'cover',
            backgroundPosition: 'center',
            minHeight: '100vh',
            position: 'relative'
        }}>
            <main className="container mx-auto py-10 px-4 flex flex-col items-center justify-center relative z-10">
                <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;

也可以把样式写到Tailwind的自定义类里，更符合你的代码风格。

方法3：转成视频格式后用video标签（推荐，性能更好） #

如果想要更流畅的播放体验（GIF体积大、帧率受限），可以把GIF转成MP4/WebM格式，再用video标签加载：

import React from 'react';
import GridMatrixVideo from '../assets/gridMatrix.mp4';

function Home() {
    return (
        <div>
            <video
                className="matrix-bg fixed top-0 left-0 w-full h-full z-[-1] object-cover"
                autoPlay
                loop
                muted
                playsInline
            >
                <source
                    src={GridMatrixVideo}
                    type="video/mp4"
                />
            </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;

转视频可以用在线工具或者FFmpeg，体积会小很多，播放也更流畅。

内容的提问来源于stack exchange，提问作者Elon Abergel