React/JSX/NextJS中点击gif自动打开全屏视频的实现方法是什么？

前置准备 #

• 提前生成视频对应的循环GIF文件，优先压缩体积避免拖慢首屏加载速度
• 将GIF和目标MP4视频文件放入项目public目录下，比如public/assets/preview.gif、public/assets/video.mp4

核心逻辑实现 #

通过React状态控制GIF和全屏播放器的显隐切换，示例代码如下：

'use client' // NextJS 13+ App Router 需添加该行标记为客户端组件
import { useState, useEffect } from 'react'
import Image from 'next/image'

export default function Home() {
  const [isVideoOpen, setIsVideoOpen] = useState(false)

  // 监听ESC按键关闭视频
  useEffect(() => {
    const handleEsc = (e: KeyboardEvent) => {
      if (e.key === 'Escape') setIsVideoOpen(false)
    }
    window.addEventListener('keydown', handleEsc)
    return () => window.removeEventListener('keydown', handleEsc)
  }, [])

  return (
    <main className="w-full min-h-screen">
      {/* 默认展示的循环GIF */}
      {!isVideoOpen && (
        <Image
          src="/assets/preview.gif"
          alt="视频预览"
          width={1920}
          height={1080}
          className="w-full h-auto cursor-pointer"
          priority // 首屏核心内容可加优先级标记
          onClick={() => setIsVideoOpen(true)}
          onMouseEnter={() => {
            // hover时预加载视频，减少点击后等待时间
            const preloadLink = document.createElement('link')
            preloadLink.rel = 'preload'
            preloadLink.as = 'video'
            preloadLink.href = '/assets/video.mp4'
            document.head.appendChild(preloadLink)
          }}
        />
      )}

      {/* 全屏视频播放器 */}
      {isVideoOpen && (
        <div className="fixed inset-0 z-50 bg-black">
          <video
            autoPlay
            controls
            playsInline
            className="w-full h-full object-contain"
            onEnded={() => setIsVideoOpen(false)}
          >
            <source src="/assets/video.mp4" type="video/mp4" />
            您的浏览器不支持视频播放
          </video>
          <button
            onClick={() => setIsVideoOpen(false)}
            className="fixed top-6 right-6 px-4 py-2 bg-white rounded text-black z-10"
          >
            关闭
          </button>
        </div>
      )}
    </main>
  )
}

注：如果使用Pages Router，不需要加顶部的'use client'标记，直接导入组件使用即可，代码中的Tailwind类名可替换为自定义样式

可选优化项 #

• 如果需要严格实现系统级全屏而非页面内固定定位全屏，可以调用浏览器原生requestFullscreenAPI，在视频挂载完成后触发对应元素的全屏方法
• 可以给GIF添加加载占位图，避免GIF体积较大时首屏出现空白区域
• 针对不同网络环境可以提供多码率的视频源，提升弱网下的播放体验

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