Next.js背景视频在Safari 15.6.1无法正常播放问题求助

问题分析 #

Safari的自动播放机制对初始页面加载的媒体资源限制更严格，即便加了muted、autoPlay这类属性，首次打开或刷新首页时，可能因为视频未完全就绪、缺少用户交互触发等原因，导致视频卡住并显示播放按钮。而通过next/link跳转返回时，属于客户端路由切换，视频元素已在缓存中，或者页面交互状态满足了Safari的播放条件，因此能正常播放。

解决方案 #

1. 结合组件生命周期手动触发播放 #

在组件挂载完成后，手动获取视频元素并调用play()方法，同时处理可能的播放失败情况：

import { useEffect, useRef } from 'react';

export default function Home({ user }) {
  const videoRef = useRef(null);

  useEffect(() => {
    const video = videoRef.current;
    if (!video) return;

    const handleLoadedData = async () => {
      try {
        await video.play();
      } catch (err) {
        console.log('视频播放触发失败:', err);
        // 可在此处添加降级逻辑，比如显示静态封面图
      }
    };

    video.addEventListener('loadeddata', handleLoadedData);
    return () => video.removeEventListener('loadeddata', handleLoadedData);
  }, []);

  return (
    <Layout user={user}>
      <div className="hero-container">
        <video ref={videoRef} muted playsInline loop>
          <source src="/video/video-4.mp4" type="video/mp4"/>
        </video>
        {/* 页面其他内容 */}
      </div>
    </Layout>
  );
}

注：这里移除了autoPlay属性，改用手动触发，避免和Safari的自动播放政策冲突。

2. 添加视频预加载属性 #

给video标签加上preload="auto"，让浏览器在页面加载时提前加载视频元数据，提升就绪速度：

<video ref={videoRef} muted playsInline loop preload="auto">
  <source src="/video/video-4.mp4" type="video/mp4"/>
</video>

3. 监听用户交互触发播放 #

如果前两种方法无效，可以监听页面的首次用户交互（点击、触摸），在用户产生操作后触发播放：

useEffect(() => {
  const video = videoRef.current;
  if (!video) return;

  const handlePlay = async () => {
    try {
      await video.play();
      // 触发后移除监听，避免重复执行
      document.removeEventListener('click', handlePlay);
      document.removeEventListener('touchstart', handlePlay);
    } catch (err) {
      console.log('播放失败:', err);
    }
  };

  document.addEventListener('click', handlePlay);
  document.addEventListener('touchstart', handlePlay);

  return () => {
    document.removeEventListener('click', handlePlay);
    document.removeEventListener('touchstart', handlePlay);
  };
}, []);

额外注意事项 #

• 确保视频采用Safari兼容的编码格式，H.264编码的MP4是最稳妥的选择；
• 检查视频文件是否完整无损坏，资源加载异常也可能导致播放卡顿。

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