ReactJS如何实现视频加载时单次自动播放、hover时循环播放

问题核心原因 #

• 视频首次自动播放结束后处于ended终止状态，直接调用play()不会自动从头开始播放，视觉上表现为无响应
• 未配置loop属性，hover触发播放后也只会单次播放，无法达成循环效果
• 用onMouseOver事件会在鼠标在视频区域内移动时反复触发，容易打断播放逻辑
• 未处理play()异步返回的Promise异常，部分场景下播放被浏览器策略拦截时会静默失败

修复代码 #

推荐方案（useRef实现，逻辑更稳定） #

import { useRef } from 'react';

function VideoComponent() {
  const videoRef = useRef(null);

  const handleMouseEnter = () => {
    const video = videoRef.current;
    if (!video) return;
    video.loop = true;
    // 播放结束状态下先重置播放进度到开头
    if (video.ended) {
      video.currentTime = 0;
    }
    video.play().catch(err => console.log('播放失败：', err));
  };

  const handleMouseLeave = () => {
    const video = videoRef.current;
    if (!video) return;
    video.pause();
  };

  return (
    <video 
      ref={videoRef}
      className="videos" 
      autoPlay
      muted
      src={prompt}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
    />
  )
}

极简方案（直接绑定事件） #

<video 
  className="videos" 
  autoPlay
  muted
  src={prompt}
  onMouseEnter={e => {
    const video = e.currentTarget;
    video.loop = true;
    if (video.ended) video.currentTime = 0;
    video.play().catch(console.error);
  }}
  onMouseLeave={e => e.currentTarget.pause()}
/>

注意事项 #

• 必须保留muted属性，否则浏览器的自动播放安全策略会阻止视频自动播放，所有场景下的播放都可能失效
• 事件替换为onMouseEnter和onMouseLeave，仅在鼠标进入/离开整个视频区域时触发一次，避免重复执行逻辑导致卡顿
• 如果需要视频首次播放完毕后自动回到首帧，可以添加onEnded={e => e.currentTarget.currentTime = 0}属性优化体验

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