ReactHlsPlayer页面刷新时如何避免视频自动加载？

方法1：利用HTML5 video的preload属性 #

react-hlsPlayer支持传递原生video元素的属性，设置preload="none"可以禁止浏览器预加载视频资源，只有用户点击播放时才会触发后端请求：

<ReactHlsPlayer
  className="video-player"
  src={link}
  controls
  playsInline
  poster={thumbnailImage}
  onContextMenu={handleContextMenu}
  preload="none" // 关键属性
/>

preload="none"会告知浏览器不预加载视频的任何数据，完全等待用户主动触发播放动作后才开始加载。

方法2：动态控制视频源（src） #

通过状态管理视频源的赋值时机，初始时不设置src，等用户点击播放时再传入真实的m3u8链接：

1. 定义状态与播放器引用：

import { useState, useRef } from 'react';

const [videoSrc, setVideoSrc] = useState('');
const playerRef = useRef(null);

2. 处理播放触发逻辑：

const handlePlay = () => {
  if (!videoSrc) {
    setVideoSrc(link);
    // 赋值后延迟触发播放，确保资源已绑定
    setTimeout(() => {
      playerRef.current?.play();
    }, 100);
  } else {
    playerRef.current?.play();
  }
};

3. 修改播放器组件：

<ReactHlsPlayer
  ref={playerRef}
  className="video-player"
  src={videoSrc}
  controls
  playsInline
  poster={thumbnailImage}
  onContextMenu={handleContextMenu}
  // 监听原生播放事件，适配默认播放按钮
  onPlay={() => {
    if (!videoSrc) setVideoSrc(link);
  }}
/>

这种方式完全由你控制视频源的加载时机，适合需要自定义交互逻辑的场景。

注意事项 #

• preload属性在主流浏览器（Chrome、Firefox、Safari）中都能正常生效，部分旧版浏览器可能存在细微差异。
• 若使用原生播放按钮，通过onPlay事件触发src赋值，能确保第一次点击播放时自动加载视频源。

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