本文阐述一种基于视频元素原生 play/pause 事件驱动 UI 状态同步的成熟方案，专门解决手动操作与 Intersection Observer 自动控制之间图标状态错位的常见痛点。该方案确保无论触发来源是用户点击还是滚动行为，播放按钮图标始终精准对应视频的真实播放状态。

从事响应式视频交互开发的同行，几乎都会遇到这样一个经典场景：一个视频既要支持用户手动点击播放/暂停，又要能根据滚动位置自动启停——比如滑出视口就暂停、重新进入再恢复播放。两套控制逻辑各自独立运行，结果经常在按钮图标上“打架”：用户手动暂停后，再滚动出去再回来，视频自己又播上了，可按钮图标仍停留在“暂停”状态。你点一下，它反而停掉，逻辑完全颠倒。

问题的根源在哪里？UI 的显示状态不应由“谁触发了操作”来决定，而必须依赖视频元素真实的运行状态。video.paused 就是那个唯一、可靠的“单一事实来源”。

✅ 推荐方案：监听 play 和 pause 原生事件实现 UI 统一同步

将按钮样式、图标显隐、controls 属性等所有与 UI 反映相关的逻辑，全部封装到一个 updateControls() 函数中，再绑定到 元素的 play 和 pause 事件上。这样一来，无论播放/暂停由何种途径触发——用户点击、Intersection Observer 自动调用、还是其他脚本执行 video.play()——UI 都能实时、精准地同步更新。

const video = document.getElementById("heroVideo");
const pauseControl = document.getElementById("pauseControl");
const playControl = document.getElementById("playControl");
const playPauseButton = document.getElementById("playPauseButton");

function updateControls() {
  if (video.paused) {
    // 视频已暂停 → 显示播放图标
    playPauseButton.classList.remove("pause");
    playPauseButton.classList.add("play");
    pauseControl.style.display = "none";
    playControl.style.display = "unset";
    video.removeAttribute("controls"); // 移除原生控件，保持自定义体验
  } else {
    // 视频正在播放 → 显示暂停图标
    playPauseButton.classList.remove("play");
    playPauseButton.classList.add("pause");
    pauseControl.style.display = "unset";
    playControl.style.display = "none";
  }
}

// 关键：监听视频自身状态变化，而非操作来源
video.addEventListener("play", updateControls);
video.addEventListener("pause", updateControls);

// 点击按钮仅负责触发播放/暂停动作，不直接修改 UI
playPauseButton.addEventListener("click", () => {
  if (video.paused) {
    video.play().catch(e => console.warn("Playback prevented:", e));
  } else {
    video.pause();
  }
});

⚠️ 注意：video.play() 可能因浏览器策略（如静音自动播放限制）抛出 Promise 拒绝，建议添加 .catch() 处理，以免阻塞后续逻辑执行。