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

Question

在React应用程序中，我正在使用

react-hls-player

。

 <ReactHlsPlayer
         className="video-player"
         src={link} // Here link is with .m3u8
         controls
         playsInline
         poster={thumbnailImage}
         onContextMenu={handleContextMenu}
 />

当我刷新/加载页面视频时开始加载（后端调用将进行）。在这里，我想避免它，我想在用户点击它时开始加载视频意味着在播放时。

有没有回调函数可以修改这个播放器？或者有其他办法吗？请帮助我。

Answer 1

我认为最简单的方法是将 src 设置为空字符串，直到用户单击视频元素。

应该是这样的：

  const [hlsSrc, setHlsSrc] = useState<string>("");
  const onUserClicked = useCallback(() => {
    setHlsSrc(src)
  }, []);
  // use hlsSrc as src in ReactHlsPlayer