React中移动端与桌面端不同视频源切换失效问题求助

1. 强制React重新渲染视频元素 #

你的条件渲染中，两个<video>元素结构相似，React的diff算法可能会复用同一个DOM节点，导致即使src变化，浏览器也不会重新加载新视频。给两个视频元素添加唯一key，强制React卸载旧节点并创建新节点：

{isMobile && block.imagePortrait?.url ? (
  <video key="mobile-video" autoPlay muted loop className={'no'}>
    <source src={block.imagePortrait.url + '?c=' + cacheBuster} type="video/mp4" />
  </video>
) : (
  <video key="desktop-video" autoPlay muted loop className={'xy'}>
    <source src={block.imageLandscape.url + '?c=' + cacheBuster} type="video/mp4" />
  </video>
)}

2. 动态切换单视频元素的源（更优方案） #

放弃条件渲染两个视频，改用单个视频元素动态更新src，并手动触发加载。这种方式避免diff算法的问题，逻辑更简洁：

import { useRef, useEffect } from 'react';

// ...

const videoRef = useRef(null);
const targetSrc = isMobile && block.imagePortrait?.url 
  ? `${block.imagePortrait.url}?c=${cacheBuster}` 
  : `${block.imageLandscape.url}?c=${cacheBuster}`;

useEffect(() => {
  if (videoRef.current) {
    videoRef.current.load(); // 切换src后强制浏览器重新加载
  }
}, [targetSrc]);

return (
  <video 
    ref={videoRef}
    autoPlay 
    muted 
    loop 
    className={isMobile ? 'no' : 'xy'}
  >
    <source src={targetSrc} type="video/mp4" />
  </video>
);

3. 检查设备判断逻辑的时效性 #

确保isMobile状态会响应窗口尺寸变化或设备旋转：

import { useState, useEffect } from 'react';

// ...

const [isMobile, setIsMobile] = useState(false);

useEffect(() => {
  const checkDevice = () => {
    // 根据你的需求设置断点，比如768px
    setIsMobile(window.innerWidth < 768);
  };
  
  // 初始化判断
  checkDevice();
  // 监听窗口 resize 事件
  window.addEventListener('resize', checkDevice);
  // 组件卸载时移除监听
  return () => window.removeEventListener('resize', checkDevice);
}, []);

同时确认HTML头部已正确设置viewport meta标签，保证窗口尺寸获取准确：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

4. 排查缓存问题（补充方案） #

如果cacheBuster无效，检查服务器端的缓存策略：

• 确保视频文件的响应头包含Cache-Control: no-cache或max-age=0，让浏览器每次请求都验证资源
• 尝试将cacheBuster嵌入文件名（若服务器支持），比如：

  const bustedMobileUrl = block.imagePortrait.url.replace('.mp4', `-${cacheBuster}.mp4`);
  

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