Next.js项目中Firebase Storage部分MP4视频无法播放问题咨询

我开发了一个TikTok克隆项目，将MP4视频上传至Firebase Storage后，把下载链接存入MongoDB，但部分视频无论是在网站上播放，还是直接访问Firebase的下载链接都无法正常播放。

上传代码如下：

const submitVideoToFirebase = async () => {
    const folderRef = ref(storage, `videos/${uuidv4()}`);
    const snapshot = await uploadBytes(folderRef, file);
    const url = await getDownloadURL(snapshot.ref);
    return url
}

无法播放的视频示例链接：https://firebasestorage.googleapis.com/v0/b/react-tik-tok-419113.appspot.com/o/videos%2F27755c0c-6549-4161-8338-5df6effc443a?alt=media&token=d3535fc5-efd0-4f9c-86d6-3b7625e8e218

可能的原因及解决方案 #

1. 视频编码不符合标准 #

Firebase Storage支持MP4格式，但仅兼容H.264（视频流）+ AAC（音频流）的编码组合，非标准编码的视频会被浏览器/播放器拒绝解码。

• 解决：用FFmpeg等工具转码视频，命令示例：

  ffmpeg -i 原视频.mp4 -c:v libx264 -c:a aac 转码后视频.mp4
  

• 验证：上传转码后的视频，测试播放是否正常。

2. 上传未指定正确的Content-Type #

直接用uploadBytes传文件时，如果文件对象的type属性不准确，或未显式设置元数据，Firebase会默认将文件类型设为application/octet-stream，浏览器无法识别为视频文件。

• 解决：上传时显式添加Content-Type元数据：

  const submitVideoToFirebase = async () => {
      const folderRef = ref(storage, `videos/${uuidv4()}`);
      // 强制指定视频类型为video/mp4
      const metadata = {
          contentType: 'video/mp4'
      };
      const snapshot = await uploadBytes(folderRef, file, metadata);
      const url = await getDownloadURL(snapshot.ref);
      return url
  }
  

• 验证：上传后在Firebase控制台查看文件元数据，确认Content-Type为video/mp4。

3. 文件上传不完整 #

网络波动可能导致视频未完全上传，即使uploadBytes返回成功，实际文件已损坏。

• 解决：
  • 对比上传前后的文件大小：前端获取file.size，上传后在Firebase控制台查看文件大小，确保两者一致；
  • 增加上传校验逻辑：

    const submitVideoToFirebase = async () => {
        try {
            const folderRef = ref(storage, `videos/${uuidv4()}`);
            const metadata = { contentType: 'video/mp4' };
            const snapshot = await uploadBytes(folderRef, file, metadata);
            // 校验上传后的文件大小
            const fileMetadata = await getMetadata(snapshot.ref);
            if (fileMetadata.size !== file.size) {
                throw new Error('文件上传不完整，请重新上传');
            }
            const url = await getDownloadURL(snapshot.ref);
            return url
        } catch (error) {
            console.error('上传失败:', error);
            throw error;
        }
    }
    

4. 存储链接权限问题 #

虽然链接带有token，但可能令牌过期或存储规则配置有误，导致无法正常读取文件。

• 解决：在Firebase控制台临时将该文件设为公开访问（仅测试用），再访问链接。如果能播放，说明令牌权限存在问题，检查下载链接生成逻辑或存储规则配置。

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