Chrome 33.0.1750.154 中的 HTML5/Javascript 视频事件行为

HTML5/Javascript Video Event Behaviour In Chrome 33.0.1750.154

本文关键字：视频 Javascript 事件 HTML5 1750 中的 Chrome      更新时间：2023-09-26

我有一个video元素，我用javascript动态控制。它一直工作得很好。今天我注意到一些奇怪的事情。

我附加了以下事件侦听器。

function registerListeners(listen) {
    listen.addEventListener('canplaythrough', canStartPlayback);
    listen.addEventListener('ended', onFinish);
    listen.addEventListener('loadeddata', onLoadComplete);
    listen.addEventListener('playing', onPlay);
    listen.addEventListener('error', mediaError);
}

canStartPlayback onFinish和onPlay的代码如下。

function canStartPlayback() {
    if (!playing) {
        playing = true;
        $('.module-content-video-loader').stopSpin();
        $('.module-content-video-loader').hide();
        media.play();
    }
}
function onFinish() {
    if (playing) {
        playing = false;
        media.pause();
        media.currentTime = 0.0;
    }
}
function onPlay() {
    playing = true;
    if (!pending) {
        $('#skip').show();
    }
}

现在，我目前发现onFinish完成后，我立即看到canStartPlayback再次被解雇。

这是对Mozilla canplaythrough的描述

canplaythrough 当就绪状态更改为CAN_PLAY_THROUGH时发送，表示假设下载速率至少保持在当前水平，则可以不间断地播放整个媒体。注意：手动设置currentTime最终会在 Firefox 中触发canplaythrough事件。其他浏览器可能不会触发此事件。

我的印象是，一直看到canplaythrough只被解雇一次。chrome最近是否更改了这一点，是否有其他人发现这种情况正在发生？

canplaythrough事件（如canplay）在readyState属性更改时触发。这些事件和属性反映了浏览器能够从当前位置播放的视频量。因此，如果您寻求未缓冲的新位置，浏览器将无法再从当前位置播放，因此readyState必须下降到HAVE_METADATA 。一旦加载了新部分，readyState最终会回到HAVE_ENOUGH_DATA，并且事件将再次触发。

从 2009 年开始修复，Chrome 模仿了 Firefox 的行为，即每次搜索时都将readyState降低到 HAVE_METADATA，即使视频已完全缓冲。据推测，这是因为即使视频是从网络加载的，将该部分加载回内存并显示当前帧仍然需要时间。

如果需要确保事件只处理一次，可以保持更详细的状态，也可以在侦听器首次运行后将其删除，如下所示：

media.removeEventListener('canplaythrough', canStartPlayback);

下面是一个示例，该示例触发了一堆此类事件并将其记录到控制台，以便在查找时可以看到它们的运行情况：http://jsbin.com/buparoye/1/edit

相关文章：