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

Question

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

Answer 1

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

请注意,间隔必须大于预期的帧间差异,但我确信你不会想要那么精确.考虑到人类最不可能察觉到该区域的差异,估计在±300ms内的缓冲时间仍然可以.

务必检查用户是否未主动暂停播放.

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
}

Answer 2

你正在寻找的事件是waiting.

从规格:

由于readyState属性更改为低于HAVE_FUTURE_DATA的值,因此可能会播放停止播放的元素会触发等待的DOM事件.

该paused状态不会改变,因为视频仍然是"潜在的打"(即"努力"中扮演).因此,waiting事件触发.当加载了足够的数据时,playing会触发.

您还可以通过查看两个属性networkState和readyState来随时检查状态

if (video.networkState === video.NETWORK_LOADING) {
    // The user agent is actively trying to download data.
}

if (video.readyState < video.HAVE_FUTURE_DATA) {
    // There is not enough data to keep playing from this point
}