Video.js 播放器初始化/currentTime 导致视频无法在具有 Google 云存储 URL 的 React 应用程序中显示

Question

我正在使用 Video.js 来封装 Google Cloud Storage 视频公共 URL，这样我就可以对其进行换肤并控制视频播放的秒数（例如，在 12 秒时播放）

我的

page.tsx

React 应用程序中有以下内容

  useEffect(() => {
    results.forEach((result, index) => {
      if (result.metadata.file_type === 'video') {
        const videoElement = document.getElementById(`video-${index}`);
        if (videoElement) {
          const player = videojs(videoElement);
          player.ready(() => {
            player.src({ type: 'video/mp4', src: result.metadata.gcs_public_url });
            player.currentTime(result.metadata.start_offset_sec); // Set the timestamp to start_offset_sec
          });
        }
      }
    });
  }, [results]);

这是我的 HTML（它循环通过

result

并显示所有视频。

result.metadata.gcs_public_url

是一个如下所示的 URL：

https://storage.googleapis.com/project/folder/video.mp4

                {results.map((result, index) => {

                        <video
                          id={`video-${index}`}
                          className="video-js vjs-default w-full h-auto mt-2"
                          controls
                          muted
                          preload="auto"
                        >
                          <source src={result.metadata.gcs_public_url} type="video/mp4" />
                          Your browser does not support the video tag.
                        </video>
                })}

由于某种原因，设置

currentTime

（文档链接）后，即使控件显示，视频也不会显示。

          const player = videojs(videoElement); # this line causes issue
          player.ready(() => {
            player.src({ type: 'video/mp4', src: result.metadata.gcs_public_url });
            player.currentTime(result.metadata.start_offset_sec); // Set the timestamp to start_offset_sec
          });

通过注释掉这些行，我可以确认是

const player = ..

行导致了问题。

Answer 1

欢迎。问题很简单，因为 className 设置为

h-auto

，由于某种原因导致视频崩溃。像这样修复它就可以了：

<video
                          id={`video-${index}`}
                          className="video-js vjs-default mt-2"
                          controls
                          height="500" // explicitly set the height
                          muted
                          preload="auto"
                        >
                          <source src={result.metadata.gcs_public_url} type="video/mp4" />
                          Your browser does not support the video tag.
                        </video>