当前位置：首页 > 行业动态 > 正文

h5的video的js事件

H5的video元素常用JS事件包括play、pause、loadedmetadata、timeupdate、ended、error等

H5 Video元素的JavaScript事件详解

HTML5的<video>元素提供了丰富的JavaScript事件，允许开发者精确控制视频播放流程、监控状态并实现交互功能，以下是核心事件的分类解析、使用场景及代码示例。

核心事件分类与触发时机

事件名称 触发时机 典型用途
play 视频开始播放时（无论是首次播放还是重新播放） 记录播放行为、隐藏加载动画
pause 视频暂停时（用户主动暂停或调用pause()方法） 保存当前进度、触发广告展示
ended 视频正常播放完毕（非中断或错误） 自动跳转到其他页面、推荐相关视频
timeupdate 播放进度变化时（每秒触发多次，频率由浏览器决定） 同步进度条、实现倍速播放
loadeddata 视频元数据加载完成（如时长、尺寸） 初始化进度条、预加载缓冲
loadedmetadata 视频元数据（如时长、帧率）加载完成 动态生成控件（如总时长显示）
seeked 用户拖动进度条或调用setCurrentTime后跳转到新位置时 隐藏自定义进度条、记录用户跳过的位置
volumechange 音量变化时（用户调整或脚本修改音量） 保存用户偏好设置、限制最大音量
error 视频加载或播放出错（如网络中断、格式不支持） 提示用户重试、切换备用资源
waiting 视频因缓冲不足而暂停（需等待更多数据） 显示缓冲动画、优化加载策略
canplay 视频已加载足够数据可以开始播放（但未自动播放） 自动播放前检查缓冲、预加载广告
canplaythrough 视频已加载全部数据（可流畅播放至结束） 移除加载提示、触发全屏播放

事件绑定与代码示例

通过addEventListener方法绑定事件，以下为常见场景的代码实现：

const video = document.querySelector('video');
// 1. 监听播放/暂停状态
video.addEventListener('play', () => {
  console.log('视频开始播放');
  // 隐藏广告或关闭遮罩层
});
video.addEventListener('pause', () => {
  console.log('视频暂停');
  // 保存当前时间到本地存储
  localStorage.setItem('savedTime', video.currentTime);
});
// 2. 处理播放结束
video.addEventListener('ended', () => {
  console.log('视频播放完毕');
  // 跳转到其他视频或重置播放
  video.currentTime = 0; // 重置到开头
});
// 3. 同步进度条（需节流处理）
let progressBar = document.querySelector('.progress-bar');
let lastTime = 0;
function updateProgress() {
  const currentTime = video.currentTime;
  const duration = video.duration;
  if (duration) {
    const percent = (currentTime / duration)  100;
    progressBar.style.width = `${percent}%`;
  }
}
video.addEventListener('timeupdate', () => {
  const now = Date.now();
  if (now lastTime > 200) { // 每200ms更新一次
    updateProgress();
    lastTime = now;
  }
});

高级技巧与注意事项

  1. 性能优化

    h5的video的js事件 第1张

    • timeupdate事件触发频繁，需对回调函数进行节流（如上例），避免影响渲染性能。
    • 在waiting事件中暂停耗时操作（如数据上报），待canplaythrough后再执行。

  2. 错误处理

    video.addEventListener('error', (e) => {
  console.error('视频加载失败:', e);
  // 提示用户重试或切换源
  alert('无法播放视频，请检查网络或联系管理员');
});

  3. 自定义控件交互

    • 监听seeked事件以同步自定义进度条与内核进度。
    • 在volumechange中动态调整UI（如音量图标大小）。

  4. 跨浏览器兼容性

    • 部分事件（如canplaythrough）在旧版浏览器中可能不触发，需结合readyState属性判断状态。
    • Safari对timeupdate的触发频率较低，需额外处理精度问题。

FAQs

Q1：如何检测用户是否看完了视频？
A1：监听ended事件，并在回调中标记观看状态。 

let isCompleted = false;
video.addEventListener('ended', () => {
  isCompleted = true;
  console.log('用户已完整观看视频');
});

Q2：如何实现视频倍速播放？
A2：通过修改playbackRate属性并监听ratechange事件： 

const speedButton = document.querySelector('.speed-btn');
speedButton.addEventListener('click', () => {
  let speed = video.playbackRate === 1 ? 2 : 1;
  video.playbackRate = speed;
});
video.addEventListener('ratechange', () => {
  console.log(`当前倍速：x${video.playbackRate}`);
});

通过合理利用<video>的JS事件，开发者可以构建高度定制化的播放体验，例如广告插入、多语种字幕切换、自适应码率调整等，建议在实际项目中结合业务需求，优先处理核心事件（如play、pause、ended、error），再逐步扩展其他交互

video
0

相关文章