如何在ReactJS中实现video标签src根据状态值条件动态变更

问题根本原因 #

这是原生<video>标签的默认行为限制：浏览器首次加载完<video>对应的媒体资源后，即使内部<source>标签的src属性发生变化，<video>元素也不会主动重新加载新的资源。你观测到状态正常更新但视频未切换，并非React没有触发组件重渲染，而是浏览器层面没有触发媒体资源的重新加载逻辑。

可行解决方案 #

方案1：直接将src绑定到

不要嵌套<source>标签，直接把条件判断放在<video>的src属性上，React更新<video>的原生src属性时会自动触发资源重加载：

<video 
  autoPlay 
  muted 
  loop 
  id="background-video"
  src={weather.weather === "clouds" ? "./sand.mp4" : "./beach.mp4"}
  type="video/mp4"
/>

方案2：给

如果需要保留<source>的写法，给<video>绑定和切换条件关联的key值，当key变化时React会直接销毁旧的<video>元素，渲染全新的元素，自然会加载新的视频资源：

<video 
  autoPlay 
  muted 
  loop 
  id="background-video"
  key={weather.weather}
>
  <source 
    src={weather.weather === "clouds" ? "./sand.mp4" : "./beach.mp4" } 
    type="video/mp4" 
  />
</video>

方案3：手动调用load()方法触发重加载

通过ref获取<video>的DOM实例，监听状态变化后手动调用load方法重新加载资源：

import { useRef, useEffect } from 'react'

// 组件内代码
const videoRef = useRef(null)

useEffect(() => {
  // 状态变化时手动触发加载
  videoRef.current?.load()
}, [weather.weather])

// JSX部分
<video 
  autoPlay 
  muted 
  loop 
  id="background-video"
  ref={videoRef}
>
  <source 
    src={weather.weather === "clouds" ? "./sand.mp4" : "./beach.mp4" } 
    type="video/mp4" 
  />
</video>

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