如何获取 Youtube 视频的持续时间而不在​​ Reactjs 中播放视频

Question

我是 ReactJS 的新手，我非常需要一些帮助。

所以我有一个视频目录，它只显示带有标签和覆盖持续时间的视频的缩略图。在我使用 Pete Cook 的 React-Player 之前，但我不希望我的视频播放器有分享、喜欢和稍后观看按钮，所以我决定不使用它，而是使用视频播放器。我只是使用图像标签来显示缩略图，如果单击图像，我只会将 Youtube 链接传递给视频播放器。

现在我的问题是我很难获得视频时长。当我还在使用 React-Player 时，我可以在点击播放按钮后获得它（不是我想要的结果，但至少我能够获得持续时间）。有什么解决办法吗？

Answer 1

您的问题是您正在向视频播放器库的 Player 组件提供一个 Youtube URL，它显然不支持它，如提到的 here。

我什至尝试过，您不会获得持续时间值，也不会播放视频。 但是，如果您将 Youtube 链接更改为例如这个https://www.w3schools.com/html/movie.mp4

您会发现一切运行良好，您甚至可以在不播放视频的情况下从 Player 的状态中获取 duration 状态。

const { player } = this.player.getState();
console.log(player.duration);

我将这两行添加到名为changeSource 的方法中，该方法在示例标题下提到了here。