如何在Next.js/React应用中加快视频加载与播放速度？

1. 降低分辨率对加载速度的影响 #

降低分辨率是提升该视频加载速度最直接有效的方案之一。你当前使用的是4K（3840×2160）分辨率视频，仅作为页面背景使用的场景下，高分辨率带来的体积负担远高于画质收益：

• 多数普通用户的设备屏幕分辨率仅为1080P或更低，4K视频完全无法发挥分辨率优势，只会徒增加载体积
• 同编码、同码率下，1080P视频的体积仅为4K的1/4左右，720P体积更是仅为4K的1/9，体积缩小后加载速度会有非常明显的提升
• 如果视频作为背景层上方还有其他叠加内容，甚至可以再适当降低分辨率，肉眼几乎感知不到画质差异，加载速度提升会更显著

2. 其他可落地的视频优化方案 #

Next.js官方确实没有内置的视频优化组件，你可以通过以下几种方案优化：

基础优化项 #

• 更换更高效的编码格式：优先转码为H.265(HEVC)格式，同画质下体积比H.264小40%-50%，同时保留H.264格式作为降级兼容，参考代码如下：

<video
  width="100%"
  autoPlay
  muted
  loop
  playsInline
  preload="auto"
  poster="/your-poster-image.jpg"
  style={{
    position: "absolute",
    left: 0,
    top: 0,
    right: 0,
    bottom: 0,
    zIndex: -1,
  }}
>
  <source
    src={`http://ticket-t01.s3.eu-central-1.amazonaws.com/${props.urlPrefix}-intro.hevc.mp4`}
    type="video/mp4; codecs=hevc"
  />
  <source
    src={`http://ticket-t01.s3.eu-central-1.amazonaws.com/${props.urlPrefix}-intro.h264.mp4`}
    type="video/mp4"
  />
</video>

• 添加poster占位图：设置视频首帧截图作为封面占位，用户进入页面时第一时间能看到画面，不会出现空白感，感知加载速度会快很多
• 开启CDN加速：你当前用的是S3直链访问，给S3桶绑定CDN后，视频会缓存到离用户更近的边缘节点，访问速度会有大幅提升
• 优化video标签属性：如果视频是首屏核心资源可添加preload="auto"，非首屏的视频可以设置preload="none"，等滚动到可视区域再触发加载
• 视频压缩处理：转码的时候适当降低码率，背景视频不需要太高的码率，控制在1-2Mbps以内完全能满足观感要求

进阶优化方案 #

• 使用自适应码流：如果视频时长较长，可以转成HLS/DASH自适应码流格式，会根据用户当前的网络速度自动匹配最合适的分辨率和码率加载
• 首屏片段预加载：可以把视频前2-3秒的低清片段单独提取出来，先加载播放，后台再缓冲完整的高清视频，切换的时候用户几乎感知不到
• 借助社区开源组件：可以使用Next.js生态下的开源视频优化组件，自动处理格式转码、自适应分辨率、懒加载等逻辑，不需要自己手动配置全流程

内容的提问来源于stack exchange，提问作者János