NextJS 14 中用于视频加载的图像占位符

Question

我有下一个 js 14 项目。我有三个滑块视频。我用的是swiper js。 在第一张幻灯片上，视频有时需要一些时间才能加载，它显示红色背景图像。

我试图在视频加载之前放置图像占位符，但图像占位符正在显示，但视频却没有。我该如何解决？

  <SwiperSlide>
                
                <div className="relative w-full h-full">
                    <Image src='/placeholder-image.png' 
                    fill
                    alt='placeholder image'/>
                    
                    {/* Video element */}
                    <video
                        id="background-video"
                        preload="auto"
                        
                        autoPlay
                        loop
                        muted
                        playsInline
                        className="w-full h-full object-cover rounded-lg"
                    >
                        <source src="/SlideNew_1.webm" type="video/webm" />
                        Your browser does not support the video tag.
                    </video>
                </div></SwiperSlide>

Answer 1

您可以做的就是使用 <video/> 标签的

poster

属性。

<SwiperSlide>  
  <div className="relative w-full h-full">
     <video
       poster="/placeholder-image.png"
       id="background-video"
       preload="auto"
       autoPlay
       loop
       muted
       playsInline
       className="w-full h-full object-cover rounded-lg"
     >
       <source src="/SlideNew_1.webm" type="video/webm" />
       Your browser does not support the video tag.
     </video>
   </div>
</SwiperSlide>