reactjs - VideoJS 程序化播放仅适用于 setTimeout

Question

基本上，当我单独调用 player.play() 时，视频不会播放，但是当我将其包装在 setTimeout 中（即使是 1ms）时，视频会播放。

我的应用是用 NextJS 在 React 中构建的。

以下是代码的外观：

const [currentVideoElement, setCurrentVideoElement] = useState(null);

useEffect(() => {
  if (!currentVideoElement) {
    return undefined;
  }

  const currentVideoPlayer = videojs(currentVideoElement, {
    autoplay: true,
    controls: false,
    loop: true,
    preload: 'auto',
  });

  currentVideoPlayer.ready(() => {
    // Should be just: currentVideoPlayer.play();
    setTimeout(() => currentVideoPlayer.play(), 1);

    currentVideoPlayer.muted(
      isCurrentVideoMuted || !isCurrentVideoFullScreen
    );
  });

  return () => {
    currentVideoPlayer.pause();
    currentVideoPlayer.currentTime(0);
  };
  // eslint-disable-next-line react-hooks/exhaustive-deps
}, [currentVideoElement]);

视频元素如下：

<video
  className="video-js vjs-custom h-full object-cover"
  playsInline
  muted
  ref={setCurrentVideoElement}
>
  <source src={url} type="video/mp4" />
</video>

现在这可行，但很想了解为什么会这样！

标签： reactjsnext.jssettimeoutvideo.js