如何为Next.js的两个视频播放器组件配置本地备用链接？

问题背景 #

你需要在Next.js本地开发（npm run dev）且无网络时，让两个视频播放器组件（HoverVideoPlayer和ReactPlayer）自动切换到本地备用视频链接。目前组件使用的是在线视频源，你已经准备好添加本地备用链接字段（videoLinkOffline）。

解决方案 #

1. 调整本地视频文件路径（关键前提） #

Next.js的静态资源需放在public目录下，所以把本地视频文件放到public/videos/general/目录中，将备用链接改为根相对路径：

videoLinkOffline: "/videos/general/31930117_LF.mp4"

避免使用../../这类相对路径，确保开发环境能正确访问本地资源。

2. 针对HoverVideoPlayer组件配置 #

方式一：结合环境与网络状态自动切换

先定义一个工具函数判断使用哪个链接：

const getAvailableVideoLink = (onlineLink, offlineLink) => {
  // 仅在本地开发环境且无网络时，直接使用本地链接
  if (typeof window !== 'undefined' && process.env.NODE_ENV === 'development' && !navigator.onLine) {
    return offlineLink;
  }
  // 其他情况优先使用在线链接
  return onlineLink;
};

然后在组件中调用：

<HoverVideoPlayer 
  videoSrc={getAvailableVideoLink(item.videolink, item.videoLinkOffline)} 
  pausedOverlay={<img src={item.thumb} alt="Lorem Ipusm" />}
/>

方式二：在线链接加载失败时降级到本地

如果需要在有网络但在线链接失效时也切换到本地，可利用组件的错误回调：

import { useState } from 'react';

// 组件内部
const [currentVideoSrc, setCurrentVideoSrc] = useState(item.videolink);

<HoverVideoPlayer 
  videoSrc={currentVideoSrc} 
  pausedOverlay={<img src={item.thumb} alt="Lorem Ipusm" />}
  onError={() => {
    // 加载失败时切换到本地链接
    setCurrentVideoSrc(item.videoLinkOffline);
  }}
/>

3. 针对ReactPlayer组件配置 #

方式一：环境与网络状态判断

同样使用上面的getAvailableVideoLink函数：

const videoUrl = getAvailableVideoLink(videoLink, item.videoLinkOffline);

<ReactPlayer 
  playing={true} 
  controls={true} 
  muted={true} 
  loop={true} 
  width="100" 
  height="100"
  {...props} 
  url={videoUrl} 
  poster="images/330163_C2B_Clean.png"
/>

方式二：加载失败降级

利用ReactPlayer的onError回调实现降级：

import { useState } from 'react';

// 组件内部
const [currentVideoUrl, setCurrentVideoUrl] = useState(videoLink);

<ReactPlayer 
  playing={true} 
  controls={true} 
  muted={true} 
  loop={true} 
  width="100" 
  height="100"
  {...props} 
  url={currentVideoUrl} 
  poster="images/330163_C2B_Clean.png"
  onError={() => {
    setCurrentVideoUrl(item.videoLinkOffline);
  }}
/>

注意事项 #

• navigator.onLine只能判断浏览器是否有网络连接，无法精准判断具体视频链接是否可达，所以两种方式结合使用效果更好。
• 确保本地视频文件的编码格式被浏览器支持（如MP4/H.264）。

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