视频事件系统：彻底掌握从 loadstart 到 ended 的完整生命周期

video.addEventListener('loadstart', () => {
  console.log('开始请求资源:', video.currentSrc);
  showLoadingSpinner(); // 展示加载动画
});

video.addEventListener('durationchange', () => {
  if (!isNaN(video.duration)) {
    console.log('视频时长:', video.duration, '秒');
    // 此时可以安全初始化进度条的总长度
    progressBar.max = video.duration;
  }
});

video.addEventListener('loadedmetadata', () => {
  // 此刻 readyState === 1 (HAVE_METADATA)
  console.log(`分辨率: x`);
  console.log(`总时长: s`);
 
  // 初始化 Canvas 尺寸（必须在这里设置，否则 videoWidth 是 0）
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
 
  // 设置进度条最大值
  progressBar.setAttribute('max', video.duration);
 
  // 此时可以安全地设置 currentTime（在 readyState=0 时设置会被忽略）
  if (savedTime) {
    video.currentTime = savedTime;
  }
});

video.addEventListener('loadeddata', () => {
  // readyState === 2 (HAVE_CURRENT_DATA)
  // 第一帧已可显示，可以隐藏封面图
  poster.style.display = 'none';
  console.log('第一帧已就绪');
});

video.addEventListener('canplay', () => {
  // 可以开始播放，但可能卡顿
  // 适合：展示"开始播放"按钮，让用户决定是否等待更多缓冲
  playBtn.disabled = false;
});
 
video.addEventListener('canplaythrough', () => {
  // 数据充足，流畅播放有保障
  // 适合：自动开始播放、隐藏缓冲提示
  hideBufferingHint();
});

video.addEventListener('play', () => {
  // 播放"意图"已触发，更新按钮图标
  playBtn.innerHTML = '⏸';
  console.log('play 触发，但视频可能还在缓冲');
});
 
video.addEventListener('playing', () => {
  // 视频真的在播了！
  hideLoadingSpinner(); // 隐藏 loading
  console.log('playing 触发，画面真实输出中');
});

// 错误写法：每次 timeupdate 都操作 DOM
video.addEventListener('timeupdate', () => {
  progressBar.value = video.currentTime; // 高频 DOM 操作
  timeLabel.textContent = formatTime(video.currentTime); // 高频 DOM 操作
});
 
// 正确写法一：用 requestAnimationFrame 限流
let rafId = null;
video.addEventListener('timeupdate', () => {
  if (rafId) return; // 已有待执行的帧，跳过
  rafId = requestAnimationFrame(() => {
    progressBar.value = video.currentTime;
    timeLabel.textContent = formatTime(video.currentTime);
    rafId = null;
  });
});
 
// 正确写法二：用时间戳节流（每 250ms 最多更新一次）
let lastUpdate = 0;
video.addEventListener('timeupdate', () => {
  const now = Date.now();
  if (now - lastUpdate < 250) return;
  lastUpdate = now;
  progressBar.value = video.currentTime;
  timeLabel.textContent = formatTime(video.currentTime);
});

video.addEventListener('pause', () => {
  playBtn.innerHTML = '▶';
  // 保存播放进度
  localStorage.setItem('lastTime', video.currentTime);
});
 
video.addEventListener('ended', () => {
  playBtn.innerHTML = '↺';
  // 播放结束，此时 video.currentTime === video.duration
  // 推荐下一个视频
  showNextVideoRecommendation();
  // 上报完播事件
  analytics.track('video_completed', { duration: video.duration });
});

video.addEventListener('waiting', () => {
  // 缓冲不足，显示 loading 转圈
  showLoadingSpinner();
  console.log('缓冲中... readyState:', video.readyState);
});
 
video.addEventListener('playing', () => {
  // 缓冲恢复，隐藏 loading
  hideLoadingSpinner();
});

let stalledTimer = null;
 
video.addEventListener('stalled', () => {
  console.warn('数据获取停滞，可能是网络问题');
 
  // 等待 5 秒后尝试重新加载
  stalledTimer = setTimeout(() => {
    const currentTime = video.currentTime;
    video.load();
    video.currentTime = currentTime;
    video.play();
  }, 5000);
});
 
video.addEventListener('playing', () => {
  // 恢复播放，清除重试计时器
  if (stalledTimer) {
    clearTimeout(stalledTimer);
    stalledTimer = null;
  }
});

video.addEventListener('abort', () => {
  console.log('加载被中止（用户操作或 src 变更）');
  // 清理相关状态
});

video.addEventListener('progress', () => {
  if (!video.duration) return;
 
  // 找到当前播放位置所在的缓冲段
  let bufferedEnd = 0;
  for (let i = 0; i < video.buffered.length; i++) {
    if (video.buffered.start(i) <= video.currentTime) {
      bufferedEnd = video.buffered.end(i);
    }
  }
 
  const bufferedPercent = (bufferedEnd / video.duration) * 100;
  bufferBar.style.width = `%`;
});

let seekingOverlay = null;
 
video.addEventListener('seeking', () => {
  // 正在跳转，显示 loading 遮罩
  seekingOverlay = showLoadingOverlay();
  console.log('跳转到:', video.currentTime);
});
 
video.addEventListener('seeked', () => {
  // 跳转完成，隐藏遮罩
  hideLoadingOverlay(seekingOverlay);
  console.log('跳转完成，当前位置:', video.currentTime);
});

video.addEventListener('emptied', () => {
  // 媒体元素已重置，清理所有 UI 状态
  progressBar.value = 0;
  timeLabel.textContent = '0:00 / 0:00';
  hideLoadingSpinner();
  console.log('媒体元素已重置');
});

video.addEventListener('ratechange', () => {
  rateDisplay.textContent = `x`;
});
 
video.addEventListener('volumechange', () => {
  // volume 或 muted 发生变化时触发
  volumeSlider.value = video.muted ? 0 : video.volume;
  updateVolumeIcon(video.muted, video.volume);
});

document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden') {
    // 页面不可见：记录当前状态
    wasPlayingBeforeHide = !video.paused;
    video.pause(); // 主动暂停，避免后台耗电
  } else {
    // 页面重新可见：恢复之前的状态
    if (wasPlayingBeforeHide) {
      // 注意：某些 Android 机型切回后 video 状态可能已重置
      // 需要重新检查 readyState
      if (video.readyState >= 3) {
        video.play().catch(() => {
          // autoplay 策略可能阻止恢复，展示播放按钮
          showPlayButton();
        });
      } else {
        // readyState 不够，等 canplay 再播
        video.addEventListener('canplay', () => video.play(), { once: true });
      }
    }
  }
});

class EventDrivenPlayer {
  constructor(video) {
    this.video = video;
    this.state = 'idle'; // idle | loading | ready | playing | paused | buffering | ended | error
    this.wasPlaying = false;
    this.bindEvents();
  }
 
  setState(newState) {
    const prev = this.state;
    this.state = newState;
    console.log(`[状态] ${prev} → ${newState}`);
    this.onStateChange(prev, newState);
  }
 
  bindEvents() {
    const v = this.video;
 
    // ── 加载链 ──
    v.addEventListener('loadstart',      () => this.setState('loading'));
    v.addEventListener('loadedmetadata', () => this.onMetadataReady());
    v.addEventListener('loadeddata',     () => this.onFirstFrameReady());
    v.addEventListener('canplay',        () => this.setState('ready'));
    v.addEventListener('emptied',        () => this.setState('idle'));
 
    // ── 播放链 ──
    v.addEventListener('play',    () => this.wasPlaying = true);
    v.addEventListener('playing', () => this.setState('playing'));
    v.addEventListener('pause',   () => {
      this.wasPlaying = false;
      this.setState('paused');
    });
    v.addEventListener('ended',   () => this.setState('ended'));
 
    // ── 缓冲链 ──
    v.addEventListener('waiting', () => this.setState('buffering'));
    v.addEventListener('stalled', () => this.onStalled());
    v.addEventListener('progress', () => this.updateBufferBar());
 
    // ── 跳转链 ──
    v.addEventListener('seeking', () => this.showSeekOverlay());
    v.addEventListener('seeked',  () => this.hideSeekOverlay());
 
    // ── 进度更新（节流） ──
    v.addEventListener('timeupdate', this.throttle(() => {
      this.updateProgressBar();
    }, 250));
 
    // ── 错误 ──
    v.addEventListener('error', () => {
      this.setState('error');
      this.handleError(v.error);
    });
 
    // ── 页面可见性 ──
    document.addEventListener('visibilitychange', () => {
      this.handleVisibilityChange();
    });
  }
 
  onMetadataReady() {
    console.log(`元数据就绪: x, s`);
  }
 
  onFirstFrameReady() {
    console.log('第一帧就绪，可隐藏封面');
  }
 
  onStalled() {
    console.warn('数据停滞，5s 后重试');
    this._stalledTimer = setTimeout(() => {
      const t = this.video.currentTime;
      this.video.load();
      this.video.currentTime = t;
      this.video.play();
    }, 5000);
  }
 
  handleError(error) {
    const msgs = { 1: '已中止', 2: '网络错误', 3: '解码失败', 4: '格式不支持' };
    console.error('[播放错误]', msgs[error?.code] || '未知错误');
  }
 
  handleVisibilityChange() {
    if (document.visibilityState === 'hidden') {
      this.wasPlaying = !this.video.paused;
      this.video.pause();
    } else if (this.wasPlaying) {
      this.video.play().catch(() => {});
    }
  }
 
  updateProgressBar() { /* 更新进度条 UI */ }
  updateBufferBar()   { /* 更新缓冲条 UI */ }
  showSeekOverlay()   { /* 显示跳转遮罩 */ }
  hideSeekOverlay()   { /* 隐藏跳转遮罩 */ }
  onStateChange()     { /* 响应状态变化，更新 UI */ }
 
  throttle(fn, delay) {
    let last = 0;
    return (...args) => {
      const now = Date.now();
      if (now - last < delay) return;
      last = now;
      fn(...args);
    };
  }
}
 
const player = new EventDrivenPlayer(document.querySelector('video'));