如何检测HTML5视频是否暂停缓冲？ [英] How to detect whether HTML5 video has paused for buffering?

问题描述

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

I'm trying to test whether a video is choppy. I have noticed that the pause event is not triggered when the video pauses for buffering. What is the best way to detect whether the video has paused for buffering?

推荐答案

我通过每次检查玩家进度来做到这一点 x 毫秒，例如50.如果玩家没有达到预期的那么高，那么我们就是在缓冲。这是非常可靠的，因为我发现其他事件，如等待或停滞并未在所有情况下被触发视频缓冲。

I did this by inspecting the player progress every x milliseconds, e.g. 50. If the player hasn't advanced as much as it was expected to, then we are buffering. This is quite reliable, since I've found that other events such as waiting or stalled are not fired in all cases of the video buffering.

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

Note that the interval must be larger than the expected inter-frame difference, but I'm sure that you won't want to be that precise anyway. An estimation of buffering time within ±300ms would still be fine, given that humans most likely cannot perceive differences in that region.

检查用户是否已经'暂时主动暂停播放。

It is important to check whether the user hasn't actively paused the playback though.

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
}

这篇关于如何检测HTML5视频是否暂停缓冲？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！