40 lines
920 B
TypeScript
40 lines
920 B
TypeScript
'use client'; // 确保客户端渲染（如果在 App Router 中使用）
|
|
|
|
const FullScreenVideoBackground = ({}: {}) => {
|
|
return (
|
|
<div
|
|
style={{
|
|
position: 'relative',
|
|
width: '100vw',
|
|
height: '100vh',
|
|
margin: 0,
|
|
padding: 0,
|
|
overflow: 'hidden',
|
|
}}
|
|
>
|
|
<video
|
|
autoPlay
|
|
muted
|
|
loop
|
|
playsInline
|
|
style={{
|
|
position: 'fixed',
|
|
top: '50%',
|
|
left: '50%',
|
|
minWidth: '100%',
|
|
minHeight: '100%',
|
|
width: 'auto',
|
|
height: 'auto',
|
|
transform: 'translate(-50%, -50%)',
|
|
zIndex: -1,
|
|
}}
|
|
>
|
|
<source src={'/video.mp4'} type='video/mp4' /> {/* 传入本地视频路径，如 '/video.mp4' */}
|
|
Your browser does not support the video tag.
|
|
</video>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default FullScreenVideoBackground;
|