如何通过video标签controls中的播放按钮调用JavaScript函数？

没法直接获取video标签自带controls里的播放按钮DOM元素——这些控件是浏览器原生渲染的，并不属于页面的DOM树结构，所以你用getElementById或querySelector这类方法肯定找不到它们。

不过你完全可以通过监听video元素的play事件来实现需求：当用户点击自带的播放按钮时，video会自动触发play事件，你只需要在这个事件上绑定自定义函数即可。

示例代码 #

HTML（保持你的原有代码）

<video controls id="video" src="../../data/myvideo.mp4"></video>

JavaScript

const video = document.getElementById('video');

// 监听播放事件，点击自带播放按钮时触发
video.addEventListener('play', () => {
  // 这里执行你的自定义逻辑
  console.log('播放按钮被点击，执行自定义函数');
  // myCustomFunction(); // 替换成你自己的函数调用
});

扩展：监听其他控件事件 #

如果需要监听暂停按钮，同理可以用pause事件：

video.addEventListener('pause', () => {
  console.log('暂停按钮被点击');
});

这种方式基于标准HTML5 Video API，所有支持HTML5视频的浏览器都能兼容，是实现这类需求的最优方案。

内容的提问来源于stack exchange，提问作者Damien Fontes