我正在尝试测试视频是否卡顿。 我注意到当视频因缓冲而暂停时,pause
事件不会触发。 检测视频是否因缓冲而暂停的最佳方法是什么?
我正在尝试测试视频是否卡顿。 我注意到当视频因缓冲而暂停时,pause
事件不会触发。 检测视频是否因缓冲而暂停的最佳方法是什么?
waiting
或stalled
并不在所有情况下触发。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
}
你要找的事件是waiting
。
根据规范:
当正在播放的元素其readyState属性的值变为低于HAVE_FUTURE_DATA时,会因该元素可能停止播放而触发等待(waiting)事件。
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
}
waiting
事件并不总是会被触发。我模拟了一个慢速连接,在视频每隔几秒钟出现缓冲时,并没有看到waiting
事件被触发(也没有stalled
)。最好的方法是与每隔几毫秒监控播放进度相结合来检查这一点。 - slhckreadyState
和相关事件的支持还不够完善。请参考这个bug https://code.google.com/p/chromium/issues/detail?id=144683 和 https://code.google.com/p/chromium/issues/detail?id=73609 。也许值得再针对waiting
问题提交一个新的bug。 - brianchirlslet slowInternetTimeout = null;
let threshold = 3000; //ms after which user perceives buffering
video.addEventListener('waiting', () => {
slowInternetTimeout = setTimeout(() => {
//show buffering
}, threshold);
});
video.addEventListener('playing', () => {
if(slowInternetTimeout != null){
clearTimeout(slowInternetTimeout);
slowInternetTimeout = null;
}
});
$vid = $("#video_id");
$vid.on('progress', function(e) {
percentVidLoaded = null;
// FF4+, Chrome
if ($vid[0] && $vid[0].buffered && $vid[0].buffered.length > 0 && $vid[0].buffered.end && $vid[0].duration) {
percentVidLoaded = $vid[0].buffered.end(0) / $vid[0].duration;
}
/* Some browsers (e.g., FF3.6 and Safari 5) cannot calculate target.bufferered.end()
* to be anything other than 0. If the byte count is available we use this instead.
* Browsers that support the else if do not seem to have the bufferedBytes value and
* should skip to there.
*/
else if ($vid[0] && $vid[0].bytesTotal != undefined && $vid[0].bytesTotal > 0 && $vid[0].bufferedBytes != undefined) {
percentVidLoaded = $vid[0].bufferedBytes / $vid[0].bytesTotal;
}
if (percentVidLoaded !== null) {
percentVidLoaded = 100 * Math.min(1, Math.max(0, percentVidLoaded));
}
});
typeof !== "undefined"
- dude您需要检查缓冲区是否小于当前视频时间。如果是,则表示视频正在缓冲。但是,您应该使用小容差来检查,以确保在实际需要缓冲之前检测到它。
例如:
var video = document.getElementById("myVideo");
var prevBuffer = {
"buffer": null,
"time": null
};
var isBuffering = function(){
if(video && video.buffered && video.buffered.end && video.buffered.length > 0){
var buffer = video.buffered.end(0);
var time = video.currentTime;
// Check if the video hangs because of issues with e.g. performance
if(prevBuffer.buffer === buffer && prevBuffer.time === time && !video.paused){
return true;
}
prevBuffer = {
"buffer": buffer,
"time": time
};
// Check if video buffer is less
// than current time (tolerance 3 sec)
if((buffer - 3) < time){
return true;
}
}
return false;
};
video.addEventListener("play", function(e){
// Make sure this handler is only called once
e.target.removeEventListener(e.type, arguments.callee);
// Give browsers 3secs time to buffer
setTimeout(function(){
// As "progress", "stalled" or "waiting" aren't fired
// reliable, we need to use an interval
var interval = setInterval(function(){
if(isBuffering()){
clearInterval(interval);
console.log("Buffering");
}
}, 500);
}, 3000);
});
checkInterval
需要比当前时间更新间隔更大。我尝试使用30.0
,但由于offset
太小,从未得到“不再缓冲”的状态。 - potenchwaiting
事件(如brianchirls的答案所建议)现在更可靠。 - slhckcheckInterval
更改为例如500
时,var offset = 1 / checkInterval
变为1/500。这将是每半秒检查的非常小的偏移量。如果checkInterval
应该是您想要的任何间隔,那么偏移量是否应该以不同的方式计算?我建议像这样:(checkInterval - x) / 1000;
。因此,时间间隔的大小以秒为单位,减去一些余量x < checkInterval
以解决不准确性问题。 - David Schumannx
的值应该是多少... 可能甚至(checkInterval / 2) / 1000
也可以。 - slhck