NextJS 14中如何实现无控制栏的视频自动播放？

1. 修复自动播放失效问题 #

浏览器自动播放策略要求视频必须静音，同时NextJS的SSR环境下，仅依赖autoPlay属性可能不稳定，建议结合React的useRef和useEffect手动触发播放：

'use client'; // NextJS 14 客户端组件标记
import { useRef, useEffect } from 'react';

function Hero() {
  const videoRef = useRef(null);

  useEffect(() => {
    const video = videoRef.current;
    if (video) {
      // 尝试自动播放，处理浏览器策略限制
      video.play().catch(err => {
        console.log('自动播放失败，需用户交互:', err);
      });
    }
  }, []);

  return (
    <div className="w-full h-screen">
      <video
        ref={videoRef}
        loop
        playsInline
        muted
        controls={false} // 隐藏控制栏
        className="w-full h-screen object-cover"
      >
        <source src="video.mp4" type="video/mp4" />
        Your browser does not support the video tag.
      </video>
    </div>
  );
}

export default Hero;

2. 彻底隐藏控制栏（CSS兜底） #

部分浏览器可能仍会显示默认控件，添加以下CSS确保隐藏：

video::-webkit-media-controls {
  display: none !important;
}

video::-webkit-media-controls-enclosure {
  display: none !important;
}

video {
  pointer-events: none; /* 可选：禁用视频区域点击，防止触发控件 */
}

3. 实现自动全屏（注意浏览器限制） #

浏览器不允许未经用户交互的自动全屏（安全策略），可通过以下方式实现：

方案：引导用户点击触发全屏 #

监听页面点击事件，用户交互后请求全屏：

'use client';
import { useRef, useEffect } from 'react';

function Hero() {
  const videoRef = useRef(null);
  const containerRef = useRef(null);

  useEffect(() => {
    const video = videoRef.current;
    if (video) {
      video.play().catch(err => {
        console.log('自动播放失败，需用户交互:', err);
      });
    }

    // 点击页面触发全屏
    const handleClick = () => {
      const container = containerRef.current;
      if (container && !document.fullscreenElement) {
        container.requestFullscreen().catch(err => {
          console.log('全屏请求失败:', err);
        });
      }
    };

    document.addEventListener('click', handleClick);
    return () => document.removeEventListener('click', handleClick);
  }, []);

  return (
    <div ref={containerRef} className="w-full h-screen cursor-pointer">
      <video
        ref={videoRef}
        loop
        playsInline
        muted
        controls={false}
        className="w-full h-screen object-cover"
      >
        <source src="video.mp4" type="video/mp4" />
        Your browser does not support the video tag.
      </video>
      <div className="absolute inset-0 flex items-center justify-center text-white text-xl">
        点击屏幕进入全屏播放
      </div>
    </div>
  );
}

export default Hero;

关键说明 #

• 'use client'标记：NextJS 14中，使用useRef、useEffect等客户端API的组件必须标记为客户端组件。
• 静音要求：浏览器自动播放策略强制要求视频静音，muted属性不可省略。
• 全屏限制：现代浏览器均禁止无用户交互的自动全屏，防止恶意网站滥用该功能。

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