如何为同一页面的多个HTML5视频使用相同自定义播放控件

你的代码里document.querySelector(".video")和document.querySelector(".toggleButton")只会选中页面中第一个匹配的元素，所以只有第一个视频能响应自定义按钮的操作。要让所有视频都生效，需要遍历所有视频播放器容器，为每个容器内的视频和按钮单独绑定事件。

修改后的JavaScript代码 #

// 获取所有视频播放器容器
const players = document.querySelectorAll(".video-player");

players.forEach(player => {
  // 从当前容器内找到对应的视频和按钮
  const video = player.querySelector(".video");
  const toggleButton = player.querySelector(".toggleButton");

  // 播放/暂停切换函数
  function togglePlay() {
    if (video.paused || video.ended) {
      video.play();
    } else {
      video.pause();
    }
  }

  // 更新按钮图标函数
  function updateToggleButton() {
    toggleButton.innerHTML = video.paused ? "►" : "❚❚";
  }

  // 绑定事件
  toggleButton.addEventListener("click", togglePlay);
  video.addEventListener("click", togglePlay);
  video.addEventListener("play", updateToggleButton);
  video.addEventListener("pause", updateToggleButton);
});

关键说明 #

• 使用document.querySelectorAll(".video-player")获取所有视频播放器的容器，确保能单独处理每一组视频和按钮。
• 在forEach循环中，每个迭代针对单个播放器容器，通过player.querySelector()获取当前容器内的视频和按钮，避免全局选择的冲突。
• 每个播放器的事件绑定和函数都是独立的，不会互相干扰。

额外优化建议 #

• 可以给视频标签去掉原生的controls属性，避免原生控件和自定义控件冲突：<video class="video" poster="/test-video/test-video-poster.jpg">
• 初始加载时可调用一次updateToggleButton()，确保按钮图标和视频初始状态一致。

内容的提问来源于stack exchange，提问作者Daniel Gillison