问题描述
我正在尝试在我的 Nextjs 应用程序的主页中显示整页视频背景,但在内容应该出现的地方却出现了空白。
我对 Nextjs 还很陌生,可能在这里犯了一个愚蠢的错误,如果有人能指出这一点,我将非常感谢您的帮助。
我的 mp4 视频存储在 public/assets
中,如下所示:
这是我的 index.js 文件:
import Head from 'next/head';
import Image from 'next/image';
import React,{ useRef,useEffect,useState } from 'react';
import ScrollAnimation from '../components/ScrollAnimation';
import Footer from '../components/Footer';
import Header from '../components/Header';
export default function Home() {
return (
<div>
<Head>
<title>Greystone</title>
<link rel='icon' href='/favicon.ico' />
<link
rel='preload'
href='/fonts/Fairplaydisplay/Fairplaydisplay-Bold.ttf'
as='font'
crossOrigin=''
/>
<link
rel='preload'
href='/fonts/Fairplaydisplay/Fairplaydisplay-Regular.ttf'
as='font'
crossOrigin=''
/>
</Head>
<main className='overflow-y-hidden h-screen'>
<Header />
<div
id='main'
className='transition duration-1000 relative ease-in-out'
onWheel={scrollTo}>
{/* Page 1 */}
<div className='h-screen w-full flex items-center'>
<video autoplay loop muted className='w-full h-screen z-10'>
<source
src='../public/assets/bubble-video.mp4'
type='video/mp4'
/>
</video>
<div className='flex flex-col absolute right-20'>
<ScrollAnimation />
</div>
<div className='w-2/5 text-left flex flex-col text-white left-20 absolute'>
<h2 className='text-5xl'>We’re Greystone.</h2>
<h2 className='text-5xl'>
We think recruitment is broken. Be part of something better.
</h2>
<p className='text-left mt-5 text-lg'>
Greystone brings the top 10% of talent together in an exclusive
club,then pairs those dream hires with the right clients. It’s
role-finding,reimagined.
</p>
<div className='mt-5 border-b-2 border-white w-36'>
<h3 className='text-left text-lg'>FIND OUT MORE</h3>
</div>
</div>
</div>
</div>
<Footer />
</main>
</div>
);
}
如果有人可以提供帮助,非常感谢!
解决方法
对于将来可能遇到类似问题的任何人,我似乎不需要在 src url 调用中使用“public”。视频标签现在看起来像这样:
<video autoPlay loop muted className='w-full h-screen z-10'>
<source src='/assets/bubble-video.mp4' type='video/mp4' />
</video>