React从Firebase Storage获取视频渲染时页面空白，硬编码URL可正常播放如何解决？

问题表现 #

在React应用中通过Firebase Storage SDK拉取视频文件的下载地址，将动态获取的地址赋值给video标签内source节点的src属性时，页面视频区域始终为空白。通过开发者工具检查DOM，能看到source节点已经携带了正确的视频地址，但视频始终无法加载。将获取到的URL直接硬编码写进src属性，视频却可以正常自动播放。

初始实现代码 #

import React, { useState, useEffect } from "react";
import { storage } from "../firebase";
const videoRef = storage.ref().child('<filename>');

export default function Dashboard() {
    const [videoURL, setVideoUrl] = useState('');

    useEffect(() => {
        videoRef.getDownloadURL().then((url) => {
            setVideoUrl(url);
        });
    }, []);
    return (
        <div>
            <video width="400" autoPlay muted loop>
                <source src={videoURL} type="video/mp4"/>
                Your Browser does not support HTML video.
            </video>
        </div>
    );
}

问题根因 #

这个问题不是React状态没有触发刷新，核心原因是HTML原生video元素的资源加载机制：

• 当<source>子节点的src属性被动态修改时，浏览器不会自动重新触发对应的资源拉取流程。你在DOM检查器里看到URL已经更新，只是React完成了DOM属性的同步，但浏览器内核不会因为这个属性值的变更，主动重新发起视频资源的请求
• 硬编码URL的场景下，video元素初次挂载时就拿到了正确的资源地址，浏览器从一开始就会正常加载资源，和动态修改子节点src的行为有本质区别

可落地修复方案 #

• 方案一：直接将src属性绑定在<video>标签自身，去掉单独嵌套的<source>子节点
  video元素自身的src属性更新时，浏览器会自动识别变更并触发资源重载，这种是最直接的修复方式。调整后的代码如下：

  <video 
    width="400" 
    autoPlay 
    muted 
    loop
    src={videoURL}
    type="video/mp4"
  >
    Your Browser does not support HTML video.
  </video>
  

• 方案二：如果必须保留<source>子节点的结构，可以给<video>元素添加基于videoURL的key属性
  当videoURL更新时，React会销毁旧的video DOM节点，重新挂载全新的video元素，新元素初始化时会读取最新的source地址，自然会触发浏览器的正常资源加载流程。调整后的代码如下：

  <video 
    key={videoURL}
    width="400" 
    autoPlay 
    muted 
    loop
  >
    <source src={videoURL} type="video/mp4"/>
    Your Browser does not support HTML video.
  </video>
  

排查补充建议 #

• 目前的异步拉取逻辑缺少错误捕获分支，建议在getDownloadURL的Promise链中补充catch逻辑打印错误信息，避免URL拉取失败时无法定位问题
• 代码中videoRef定义在组件外部的写法本身没有问题，只要存储路径固定就不会重复初始化冗余实例；如果后续视频路径会动态变动，需要把ref的初始化逻辑放到对应作用域内，避免缓存旧的文件引用

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