videojscurrenttime无效

最新推荐文章于 2024-11-12 13:59:15 发布

原创最新推荐文章于 2024-11-12 13:59:15 发布 · 3k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Vue 专栏收录该内容

42 篇文章

订阅专栏

本文介绍了解决视频播放器在更换视频源后如何准确地进行时间跳转的问题。通常情况下，直接调用 currentTime() 方法无法实现预期效果，因为视频可能尚未加载完毕。文章提供了一种解决方案：通过监听 'loadedmetadata' 事件来确保视频已准备好再进行跳转。

//添加视频准备完成后的回调函数
player.on('loadedmetadata', function() {
            player.play();            			//自动播放
            player.currentTime(100);		    //跳转
});

我们在更换视频地址后需要让视频跳转到某个位置，按理说使用currentTime()就可以解决，但是在player.src()函数执行后再执行player.currentTime()就会无效。

这种情况是因为调用player.src()后视频还没有准备好，所以player.currentTime()无效，解决办法就是等视频准备好后再调用currentTime()；
需求场景是我们界面上默认是1个视频的播放地址
在这里插入图片描述
点击后我们需要更换界面显示的视频地址所导致的问题。
这样通过上面的方法，在vue的methods 方法进行执行达到更换的效果