TikTok克隆应用播放Firebase存储视频报错：src指定资源不兼容

报错信息 #

ERROR
The media resource indicated by the src attribute or assigned media provider object was not suitable.

问题排查与修复方案 #

1. 先修复播放/暂停逻辑的明显bug #

你的handleStart函数存在逻辑错误：暂停视频后未将play状态设为false，导致点击无法正确切换播放状态，甚至可能触发播放异常。修改后的代码如下：

import React, { useRef, useState } from "react";
import "./video.css";

function Video() {
  const videoRef = useRef(null);
  const [play, setPlay] = useState(false);

  function handleStart() {
    if (play) {
      videoRef.current.pause();
      setPlay(false); // 此处修正为false
    } else {
      videoRef.current.play();
      setPlay(true);
    }
  }

  return (
    <div className="video">
      <video
        className="video__player"
        ref={videoRef}
        onClick={handleStart}
        loop
        src="https://firebasestorage.googleapis.com/v0/b/jornada-dev.appspot.com/o/brecker2.mp4?alt=media&token=b5399418-9276-4e53-a706-1e00290c2c74"
      >
      </video>
    </div>
  );
}

export default Video;

2. 排查Firebase视频资源本身的问题 #

若修复逻辑后仍报错，需检查以下几点：

• 视频编码兼容性：确保视频采用浏览器支持的编码（如H.264编码的MP4），可使用转码工具重新处理后上传至Firebase Storage。
• 跨域访问配置：Firebase Storage默认可能存在跨域限制，需在Firebase控制台配置CORS规则，允许你的应用域名访问该资源。
• 文件权限设置：检查Firebase Storage中该视频的权限，确认是公开可读状态，或你的应用有对应的访问权限（可在Storage控制台修改文件规则）。
• 链接有效性：直接在浏览器打开视频链接，确认资源能正常加载播放，排除链接过期或文件不存在的情况。

3. 增强视频标签的兼容性与错误监听 #

可以给video标签添加类型声明和错误监听，方便排查问题：

<video
  className="video__player"
  ref={videoRef}
  onClick={handleStart}
  loop
  src="你的Firebase视频链接"
  type="video/mp4"
  onError={(e) => console.log("视频播放错误详情:", e)}
>
  你的浏览器不支持该视频格式
</video>

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