这里有一个片段显示了实际的问题,但基本上,当标签在Chrome中处于后台时,requestVideoFrameCallback就会停止运行。
function startTest() {
video = document.querySelector('video');
canvas = document.querySelector('canvas');
ctx = canvas.getContext('2d');
let start_time = 1.0, paint_count = 0, raf_count = 0;
let last_time = 0;
var paintFrame = function(timestamp, metadata) {
if (start_time == 1.0)
start_time = timestamp;
updateCanvas(ctx, video);
last_counter = metadata.presentedFrames;
var elapsed_frame = 0;
var elapsed = (timestamp - start_time) / 1000.0;
if(last_time == 0){
console.log('init')
elapsed_frame = 0
}else{
elapsed_frame = (new Date()).getTime() - last_time
}
last_time = (new Date()).getTime()
var fps_text = document.querySelector('#fps');
var presented = metadata.presentedFrames + 1;
fps_text.innerText =
'actual fps: ' + (++paint_count / elapsed).toFixed(3) + ', ideal fps: ' +
(presented / elapsed).toFixed(3) + ', missed: ' +
(presented - paint_count) + '/' + presented +
'(' + ((presented - paint_count)/presented*100.0).toFixed(1) + '%)';
if(elapsed_frame > 100){
console.log('Long clock-time', elapsed_frame, 'missed', (presented - paint_count));
}
video.requestVideoFrameCallback(paintFrame);
};
video.onplay = function(){
v = video.requestVideoFrameCallback(paintFrame);
};
video.playbackRate = 1.0;
video.src="https://tguilbert-google.github.io/vid/buck360p_vp9.webm"
};
字符串
https://codepen.io/jerodvenemafm/pen/gOqqWmJ
以下是Chrome文档的参考:
https://developer.chrome.com/blog/background_tabs/的
并特别说明如果音频打开,这应该如何在后台运行:
https://bugs.chromium.org/p/chromium/issues/detail?id=1012063的
两者似乎都暗示这不是预期的行为,所以我有点困惑。这是Chrome的错误,还是我遗漏了某种设置?
1条答案
按热度按时间yqlxgs2m1#
requestVideoFrameCallback()
的说明书上说,它...注册下次向合成器呈现帧时要激发的回调。
https://wicg.github.io/video-rvfc/#dom-htmlvideoelement-requestvideoframecallback
我认为Chrome在标签不可见时不会这样做,因此也会停止调用回调。
同样,当标签不可见时,对
requestAnimationFrame()
的调用也会停止。我猜原因非常相似。只要没有重新绘制,就没有回调。据我所知,播放音频(包括视频中的音频)的网站的例外情况只适用于
setTimeout()
和setInterval()
。