当前位置：首页 > java >正文

vedio.ontimeupdate()和video.onloadeddata（）

java 2025/7/17 14:57:48

`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. 与其他视频事件的区别

事件	触发条件
`onloadedmetadata`	仅元数据（如时长、分辨率）加载完成，但画面未加载。
`onloadeddata`	第一帧画面加载完成，可显示画面但可能无法流畅播放。
`oncanplay`	已加载足够数据可开始播放（但不保证不卡顿）。
`oncanplaythrough`	已加载足够数据可流畅播放至结束（理想状态）。

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;