javascript - 如何检测HTML5视频是否暂停缓冲？

Question

我正在尝试测试视频是否不稳定。我注意到当视频暂停缓冲时，不会触发 pause 事件。检测视频是否暂停缓冲的最佳方法是什么？

Answer 1

我通过每 x 毫秒检查玩家进度来做到这一点，例如50. 如果玩家没有像预期的那样前进，那么我们正在缓冲。这是非常可靠的，因为我发现在视频缓冲的所有情况下都不会触发其他事件，例如 waiting 或 stalled。

请注意，间隔必须大于预期的帧间差异，但我相信您无论如何都不想那么精确。考虑到人类很可能无法感知该区域的差异，因此将缓冲时间估计在 ±300 毫秒内仍然可以。

重要的是检查用户是否没有主动暂停播放。

var checkInterval  = 50.0 // check every 50 ms (do not use lower values)
var lastPlayPos    = 0
var currentPlayPos = 0
var bufferingDetected = false
var player = document.getElementById('videoPlayer')

setInterval(checkBuffering, checkInterval)
function checkBuffering() {
    currentPlayPos = player.currentTime

    // checking offset should be at most the check interval
    // but allow for some margin
    var offset = (checkInterval - 20) / 1000

    // if no buffering is currently detected,
    // and the position does not seem to increase
    // and the player isn't manually paused...
    if (
            !bufferingDetected 
            && currentPlayPos < (lastPlayPos + offset)
            && !player.paused
        ) {
        console.log("buffering")
        bufferingDetected = true
    }

    // if we were buffering but the player has advanced,
    // then there is no buffering
    if (
        bufferingDetected 
        && currentPlayPos > (lastPlayPos + offset)
        && !player.paused
        ) {
        console.log("not buffering anymore")
        bufferingDetected = false
    }
    lastPlayPos = currentPlayPos
}