如何检测 HTML 视频播放器上的播放按钮

在 HTML 页面上添加视频播放器是一个常见的需求，而检测播放器上的播放按钮是否存在则可以判断用户是否已经点击了播放按钮，以便进一步控制视频播放。

实现方法

1. 使用 JavaScript 操作 DOM 元素

使用 JavaScript 可以方便地获取网页中的 DOM 元素，因此可以通过检测播放按钮元素的存在与否来判断是否已经开始播放视频。

const playButton = document.querySelector('.play-button');
if (playButton) {
  // 播放按钮存在，已经点击了
} else {
  // 播放按钮不存在，还未点击
}

2. 监听视频元素的事件

HTML 视频播放器会触发一些事件，如 play、ended 等，可以通过监听这些事件来判断是否已经开始播放视频。

const video = document.querySelector('video');
video.addEventListener('play', function() {
  // 视频已经开始播放
});

3. 使用框架提供的 API

很多 JavaScript 框架都提供了操作 DOM 元素、处理事件等功能的 API，可以方便地检测播放器上的播放按钮是否存在。

以 jQuery 为例，可以使用以下代码检测播放按钮是否存在：

if ($('.play-button').length) {
  // 播放按钮存在，已经点击了
} else {
  // 播放按钮不存在，还未点击
}

总结

通过 JavaScript 操作 DOM 元素、监听视频元素的事件或使用框架提供的 API，可以方便地检测 HTML 视频播放器上的播放按钮是否存在，以便控制视频播放。