在NextJS中实现DatoCMS/Mux视频的渐进式加载及模糊占位效果

核心思路 #

利用DatoCMS返回的blurUpThumb作为视频加载前的模糊占位，配合Next.js的状态控制与视频加载策略，实现类似图片的渐进式加载体验，缓解视频初始加载慢的问题。

具体实现步骤 #

1. 叠加占位图与视频的布局结构 #

将模糊占位图和视频元素放在同一个容器内，初始显示占位图，待视频加载完成后切换显示视频，通过CSS定位实现层叠效果：

import Image from 'next/image';
import { useState } from 'react';

export default function VideoPlayer({ videoData }) {
  const [isVideoReady, setIsVideoReady] = useState(false);

  return (
    <div className="relative aspect-video w-full overflow-hidden">
      {/* 模糊占位图 - 初始状态显示 */}
      {!isVideoReady && (
        <div className="absolute inset-0">
          <Image
            src={videoData.blurUpThumb}
            alt="视频占位图"
            fill
            className="object-cover"
            priority={false}
          />
        </div>
      )}

      {/* 视频元素 - 加载完成后显示 */}
      <video
        className={`absolute inset-0 w-full h-full object-cover transition-opacity duration-300 ${isVideoReady ? 'opacity-100' : 'opacity-0'}`}
        onLoadedData={() => setIsVideoReady(true)}
        controls
        preload="metadata"
      >
        <source src={videoData.streamingUrl} type="application/x-mpegURL" />
        <source src={videoData.mp4Url} type="video/mp4" />
      </video>
    </div>
  );
}

2. 优化视频加载策略 #

• 设置preload="metadata"：让浏览器仅加载视频元数据（时长、分辨率等），而非完整视频文件，大幅降低初始请求体积。
• 优先使用HLS流（streamingUrl）：Mux的HLS支持自适应比特率，浏览器会先加载低码率片段，再根据网络情况逐步提升画质。

3. 用react-datocms组件简化占位图实现 #

如果项目已使用react-datocms/image组件，可直接复用其模糊占位逻辑：

import { Image as DatoImage } from 'react-datocms';
import { useState } from 'react';

// 组件内部
{!isVideoReady && (
  <div className="absolute inset-0">
    <DatoImage
      data={videoData.blurUpThumb}
      className="object-cover w-full h-full"
    />
  </div>
)}

4. 可选：首屏外视频懒加载 #

若视频不在首屏，可添加loading="lazy"属性进一步优化初始页面加载速度：

<video
  // 其他属性
  loading="lazy"
>
  {/* 视频源 */}
</video>

关键注意事项 #

• 确保blurUpThumb的宽高比与视频容器一致，避免占位图变形。
• 避免设置preload="auto"，否则浏览器会自动加载视频内容，抵消渐进式加载效果。
• 测试慢速网络环境下的体验，确保占位图快速显示、视频加载过程平滑。

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