vedio.ontimeupdate()和video.onloadeddata（）

video.onloadeddata （）

video.onloadeddata 是 JavaScript 中用于监听 HTML <video> 元素 「当前帧数据已加载」 的事件处理器。当视频的第一帧画面数据加载完成（足以开始播放）时，会触发此事件。

1. 基本用法

const video = document.querySelector('video');

video.onloadeddata = function() {
    console.log('视频第一帧已加载，可以播放了！');
};

• 触发时机：

  • 视频元数据（如分辨率、时长）和第一帧画面加载完成。

  • 早于 oncanplay（可流畅播放的事件）。

• 用途：在视频初始渲染时执行操作（如显示封面、初始化播放器）。

2. 替代方案：addEventListener

推荐使用 addEventListener，避免覆盖已有事件：

video.addEventListener('loadeddata', function() {
    console.log('视频数据已加载');
});

3. 常见应用场景

① 显示视频封面（第一帧）

video.addEventListener('loadeddata', function() {
    const canvas = document.createElement('canvas');
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    canvas.getContext('2d').drawImage(video, 0, 0);
    document.querySelector('.video-cover').appendChild(canvas);
});

② 初始化播放器状态

video.addEventListener('loadeddata', function() {
    // 显示自定义播放按钮
    document.querySelector('.play-button').style.display = 'block';
});

③ 检测视频基础信息

video.addEventListener('loadeddata', function() {
    console.log('视频分辨率:', video.videoWidth, 'x', video.videoHeight);
    console.log('视频时长:', video.duration);
});

4. 与其他视频事件的区别

5. 注意事项

• 网络环境影响：如果视频文件较大或网络慢，loadeddata 可能延迟触发。

• 与preload属性相关：若 <video preload="none">，需用户交互后才会加载数据。

• 移动端兼容性：部分移动浏览器可能延迟加载数据以节省流量。

总结

video.onloadeddata 是视频处理的基础事件之一，适合在视频画面首次可用时执行初始化操作。若需更高兼容性，建议结合 loadedmetadata 和 canplay 事件使用。

video.ontimeupdate()

video.ontimeupdate() 是 JavaScript 中用于监听 HTML <video> 元素播放时间更新的事件处理器。当视频播放时，只要当前播放位置（currentTime）发生变化，就会触发该事件。

1. 基本用法

const video = document.querySelector('video');

video.ontimeupdate = function() {
    console.log('当前播放时间:', video.currentTime);
};

• 触发时机：视频播放、用户拖动进度条、跳转时间点等。

• 用途：实时监测播放进度，用于更新进度条、显示字幕、记录观看行为等。

2. 替代方案：addEventListener

更推荐使用 addEventListener，避免覆盖已有事件：

video.addEventListener('timeupdate', function() {
    console.log('时间更新:', video.currentTime);
});

3. 常见应用场景

① 自定义进度条同步

video.addEventListener('timeupdate', function() {
    const progress = (video.currentTime / video.duration) * 100;
    document.querySelector('.progress-bar').style.width = `${progress}%`;
});

② 字幕/弹幕显示

const subtitles = [
    { time: 5, text: "第一句字幕" },
    { time: 10, text: "第二句字幕" }
];

video.addEventListener('timeupdate', function() {
    subtitles.forEach(item => {
        if (video.currentTime >= item.time && video.currentTime < item.time + 2) {
            document.querySelector('.subtitle').textContent = item.text;
        }
    });
});

③ 记录观看进度

video.addEventListener('timeupdate', function() {
    localStorage.setItem('videoProgress', video.currentTime);
});

// 下次打开页面时恢复进度
video.currentTime = parseFloat(localStorage.getItem('videoProgress')) || 0;

4. 注意事项

• 性能优化：timeupdate 触发频率较高（约每秒4-60次），避免在回调中执行复杂计算。

• 与seeked事件区别：seeked 仅在用户手动跳转后触发，而timeupdate在播放过程中持续触发。

总结

video.ontimeupdate 是控制视频交互的核心事件之一，适用于进度跟踪、动态内容加载等场景。推荐使用 addEventListener('timeupdate') 以保持代码灵活性。