时间戳

首页 > 解决方案 > 在videojs中设置新的currentTime后检测播放器何时完成加载源

javascript - 在videojs中设置新的currentTime后检测播放器何时完成加载源

问题描述

在我的应用程序中，我实现了一个简单的搜索器 UI，它可以更改currentTime当前正在播放的媒体，如下所示：

const seekEnd = (newPosition) => {
 const player = videojs(playerRef.current);
 player.currentTime(mediaDuration * (newPosition / 100));

 //some time passes before the media can resume playing if that part of the 
 //media is not loaded yet
}

当播放器完成加载它需要从新设置的位置播放的媒体部分时，我如何捕捉？

我认为loadeddata发生这种情况时会触发该事件，但这似乎仅在最初为新媒体加载数据时触发，而不是在播放器已经开始播放的媒体中跳转到新位置时触发。

标签： javascriptreactjsvideo.js

解决方案

通过该canplaythrough事件，您可以检查视频何时有足够的缓冲数据来开始播放视频而不会中断。每当您更改搜索器的位置时，它也会触发该事件，并且它必须获取数据才能从该位置播放该视频。

player.addEventListener('canplaythrough', event => {
  // I have downloaded enough data to start playing.
});

推荐阅读