Video.js中调用currentTime()设置播放进度无效问题求助

你遇到的问题核心是视频元数据未加载完成时，直接调用currentTime()无法生效。在执行player.load()后，视频需要先加载元数据（如时长、可播放范围等关键信息），此时才能正确设置播放进度。

修复方案 #

将设置播放进度的逻辑放到loadedmetadata事件回调中，确保视频元数据加载完成后再执行：

function _(el) {
    return document.getElementById(el);
}

const player = videojs("video-id")
let videoId = undefined

function playVideo() {
    const textElement = _("text-id")
    videoId = textElement.value
    if (!player.paused) {
        player.pause()
    }
    player.reset()
    player.src({type: 'video/mp4', src: `/download/${videoId}`})
    
    // 移除旧的事件监听，避免重复触发
    player.off('loadedmetadata', setPlaybackProgress);
    // 绑定新的监听
    player.on('loadedmetadata', setPlaybackProgress);
    
    player.load()
}

function setPlaybackProgress() {
    const leftTime = localStorage.getItem(videoId)
    console.log("Before set:", player.currentTime())
    console.log("Left time:", leftTime)
    if (leftTime !== null) {
        const leftTimeInt = parseInt(leftTime)
        console.log("Left time int: ", leftTimeInt)
        player.currentTime(leftTimeInt)
        console.log("After set:", player.currentTime())
    }
    console.log("New video time: ", player.currentTime())
}

补充说明 #

• loadedmetadata事件会在视频元数据加载完成后触发，此时视频的时长、可播放位置等信息已就绪，设置currentTime才能生效。
• 若需要确保视频可流畅播放后再跳转，也可改用canplay事件，但loadedmetadata已足够满足进度设置需求。
• 每次调用playVideo时移除旧的事件监听，防止多次绑定导致回调重复执行。

内容的提问来源于stack exchange，提问作者Vyacheslav Lebedev