HTML5视频“进展” Chrome 不再按预期触发事件

发布于 2024-12-20 18:38:39 字数 941 浏览 1 评论 0原文

我一直在为 html5 视频开发一组基于画布的视频控件。直到最近，一切都运转良好。一旦视频开始缓冲，“progress”事件的 Javascript 事件侦听器将更新画布洗涤器。

最近，我升级了操作系统，最新版本的 Chrome (15.0.874.106) 似乎无法正确触发进度事件。它不会在视频完全加载之前触发，而是在很短的时间后停止触发。此行为在 Firefox 或以前版本的 Chrome(12) 中不存在。

我缺少什么吗？

这是我正在使用的测试代码：

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<video id="main-player" preload="auto" controls>
<source src='video/atest.mp4' type='video/mp4' />
<source src='video/atest.webm' type='video/webm' />
<source src='video/atest.ogv' type='video/ogg' />
</video>

<script>
var player = document.getElementById('main-player');
player.addEventListener('progress', function(){
    console.log('buffering: [duration: '+player.duration+'] [buffered: '+player.buffered.end(0)+']');
});
</script>
</body>
</html>

即使我完全删除 JS 处理程序并且仅观察视频标记提供的洗涤器，缓冲也会提前停止。

原文

I've been developing a set of canvas based video controls for a html5 video. Until recently, everything was working perfectly. Once the video starts buffering, my Javascript event listener for the 'progress' event will update the canvas scrubber.

Recently, I upgraded my OS and the latest build of Chrome (15.0.874.106) doesn't seem to fire the progress event properly. Instead of firing until the video is completely loaded, it stops firing after a very short time. This behavior isn't present in Firefox or on previous builds of Chrome(12).

Is there something that I'm missing?

Here is the testing code that I'm using:

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<video id="main-player" preload="auto" controls>
<source src='video/atest.mp4' type='video/mp4' />
<source src='video/atest.webm' type='video/webm' />
<source src='video/atest.ogv' type='video/ogg' />
</video>

<script>
var player = document.getElementById('main-player');
player.addEventListener('progress', function(){
    console.log('buffering: [duration: '+player.duration+'] [buffered: '+player.buffered.end(0)+']');
});
</script>
</body>
</html>

The buffering stops early even if I remove my JS handler completely and only observe the scrubber provided by the video tag.

分享到QQ

分享到微博