尝试在 Next.js 中呈现整页视频背景但获得空白页面

如何解决尝试在 Next.js 中呈现整页视频背景但获得空白页面

我正在尝试在我的 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>