React中iframe视频播放一次后无法正常工作的问题求助

方案1：用HTML5 video标签替代iframe（优先推荐） #

iframe加载单个MP4视频完全没必要，video标签原生支持循环、自动播放等特性，可控性更强，能避免iframe上下文导致的播放异常。

React代码示例：

<video
  title="background-video"
  src="https://res.cloudinary.com/vfcteam8/video/upload/v1657785901/vfc-assets/c695bf51-2e60-4107-9e57-9002beb9e68d/b5283ba7-884c-4bb5-b523-d88ae58fe0c5-Snow_5.mp4.mp4"
  autoPlay={autoplay}
  loop
  muted  // 现代浏览器要求自动播放必须配合静音，否则会被拦截
  playsInline
  style={{ width: '100%', height: '100%', border: 'none' }}
/>

方案2：通过Cloudinary URL参数配置循环 #

Cloudinary支持在视频URL中添加处理参数，直接让返回的视频自带循环逻辑，不需要前端额外配置。只需在upload后添加/loop/：

修改后的iframe src：

https://res.cloudinary.com/vfcteam8/video/upload/loop/v1657785901/vfc-assets/c695bf51-2e60-4107-9e57-9002beb9e68d/b5283ba7-884c-4bb5-b523-d88ae58fe0c5-Snow_5.mp4.mp4

对应的React代码：

<iframe
  title="background-video"
  src='https://res.cloudinary.com/vfcteam8/video/upload/loop/v1657785901/vfc-assets/c695bf51-2e60-4107-9e57-9002beb9e68d/b5283ba7-884c-4bb5-b523-d88ae58fe0c5-Snow_5.mp4.mp4'
  frameBorder="0"
  allowFullScreen
  allow={`${autoplay && 'autoplay;'} encrypted-media`}
/>

方案3：监听iframe内部视频的结束事件，手动重置播放 #

如果必须保留iframe，可以通过监听内部视频的ended事件，在播放结束后手动重置播放进度并重新播放：

React代码示例：

import { useRef, useEffect } from 'react';

const VideoIframe = ({ autoplay }) => {
  const iframeRef = useRef(null);

  useEffect(() => {
    const iframe = iframeRef.current;
    if (!iframe) return;

    const onIframeLoad = () => {
      const video = iframe.contentDocument?.querySelector('video');
      if (!video) return;

      const handleVideoEnd = () => {
        video.currentTime = 0;
        video.play().catch(err => console.error('播放失败:', err));
      };

      video.addEventListener('ended', handleVideoEnd);
      return () => video.removeEventListener('ended', handleVideoEnd);
    };

    iframe.addEventListener('load', onIframeLoad);
    return () => iframe.removeEventListener('load', onIframeLoad);
  }, []);

  return (
    <iframe
      ref={iframeRef}
      title="background-video"
      src='https://res.cloudinary.com/vfcteam8/video/upload/v1657785901/vfc-assets/c695bf51-2e60-4107-9e57-9002beb9e68d/b5283ba7-884c-4bb5-b523-d88ae58fe0c5-Snow_5.mp4.mp4'
      frameBorder="0"
      allowFullScreen
      allow={`${autoplay && 'autoplay;'} encrypted-media`}
    />
  );
};

export default VideoIframe;

注意：这种方式依赖iframe内部的DOM结构，如果Cloudinary的视频播放页结构变更可能失效，且要确保同源策略允许访问内部文档（Cloudinary的视频地址通常允许）。

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