如何用JavaScript为多个HTML5视频实现播放/暂停按钮功能

你已经精准定位了问题核心——点击按钮时lastClicked指向的是按钮元素，而按钮并没有play()/pause()方法。下面给你两种实用的解决思路，都能快速搞定这个问题：

方法一：利用DOM层级关联对应视频（无需修改HTML） #

因为每个播放按钮和它对应的视频都在同一个.player容器里，我们可以通过DOM的层级关系，从按钮向上找到父容器，再定位到里面的视频元素：

// VIDEO CONTROLS
const portfolio = document.querySelector(".portfolio");
const player = portfolio.querySelectorAll(".viewer");
const toggle = portfolio.querySelectorAll(".toggle");
let lastClicked;

function toggleVideo () {
  let targetVideo;
  // 判断当前点击的是视频本身还是按钮
  if (this.tagName === 'VIDEO') {
    targetVideo = this;
  } else {
    // 从按钮找到最近的.player父容器，再获取里面的视频
    targetVideo = this.closest('.player').querySelector('.viewer');
  }

  // 执行播放/暂停操作
  if(targetVideo.paused) {
    targetVideo.play();
  } else {
    targetVideo.pause();
  }
  
  // 更新lastClicked为当前操作的视频（方便后续其他功能复用）
  lastClicked = targetVideo;
}

// 绑定事件监听
player.forEach(video => video.addEventListener("click", toggleVideo));
toggle.forEach(button => button.addEventListener("click", toggleVideo));

方法二：通过data属性关联视频（更灵活易维护） #

如果你的DOM结构后续可能调整，或者想让关联关系更清晰，可以给每个视频添加唯一ID，再给对应按钮加data-video属性指向视频ID：

第一步：修改HTML（给视频和按钮加关联标识） #

<!-- 第一个模态框的视频和按钮 -->
<video id="videoOne" class="player__video viewer" src="./media/video/1.waves.mp4"></video>
<button class="video-play toggle" data-video="videoOne">►</button>

<!-- 第二个模态框的视频和按钮 -->
<video id="videoTwo" class="player__video viewer" src="./media/video/2.words.mp4"></video>
<button class="video-play toggle" data-video="videoTwo">►</button>

第二步：修改JS逻辑（通过data属性获取视频） #

// VIDEO CONTROLS
const portfolio = document.querySelector(".portfolio");
const player = portfolio.querySelectorAll(".viewer");
const toggle = portfolio.querySelectorAll(".toggle");
let lastClicked;

function toggleVideo () {
  let targetVideo;
  // 判断当前点击的是视频本身还是按钮
  if (this.tagName === 'VIDEO') {
    targetVideo = this;
  } else {
    // 通过按钮的data-video属性获取对应视频
    const videoId = this.dataset.video;
    targetVideo = document.getElementById(videoId);
  }

  // 执行播放/暂停操作
  if(targetVideo.paused) {
    targetVideo.play();
  } else {
    targetVideo.pause();
  }
  
  // 更新lastClicked为当前操作的视频
  lastClicked = targetVideo;
}

// 绑定事件监听
player.forEach(video => video.addEventListener("click", toggleVideo));
toggle.forEach(button => button.addEventListener("click", toggleVideo));

额外优化：同步播放按钮的状态 #

如果想让按钮图标随播放状态切换（比如播放时显示❚❚，暂停时显示►），可以在toggleVideo函数末尾加这段逻辑：

// 如果点击的是按钮，同步切换图标
if (this.tagName === 'BUTTON') {
  this.textContent = targetVideo.paused ? '►' : '❚❚';
}
// 如果你也想让点击视频时同步更新对应按钮的状态，可以额外找到当前视频的按钮并修改

内容的提问来源于stack exchange，提问作者Anders Eriksson