如何追踪浏览器播放器中HTML 5视频的下载点击事件？

原生HTML5 video默认控件里的下载按钮并没有暴露标准可监听事件，以下是两种可行实现方案：

方案一：自定义下载按钮（推荐，兼容性好） #

放弃依赖原生控件的下载按钮，自行实现可控的下载按钮，完全掌握点击事件：

<div class="video-container">
  <video
    src="https://www.w3schools.com/tags/movie.ogg"
    width="320"
    height="240"
    id="myVid"
  ></video>
  <div class="custom-controls">
    <!-- 可按需添加播放、暂停、进度条等其他自定义控件 -->
    <button id="downloadBtn">下载视频</button>
  </div>
</div>

<script>
const downloadBtn = document.getElementById('downloadBtn');
const video = document.getElementById('myVid');

downloadBtn.addEventListener('click', () => {
  // 1. 执行统计逻辑，替换为你的实际统计代码
  console.log('用户触发视频下载');
  // 示例：analytics.track('video_download', { videoId: 'myVid', url: video.src });

  // 2. 触发视频下载
  const downloadLink = document.createElement('a');
  downloadLink.href = video.src;
  downloadLink.download = 'video.ogg'; // 自定义下载文件名
  downloadLink.click();
});
</script>

<style>
.video-container {
  position: relative;
  display: inline-block;
}
.custom-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.7);
  padding: 8px;
  text-align: right;
}
.custom-controls button {
  color: #fff;
  background: transparent;
  border: none;
  cursor: pointer;
}
</style>

方案二：监听原生控件下载按钮（兼容性有限） #

如果必须保留原生controls，可通过以下方式尝试捕获点击事件：

方法A：全局点击事件判断 #

监听页面全局点击，通过元素特征判断是否点击了下载按钮（需适配不同浏览器的元素属性）：

document.addEventListener('click', (e) => {
  const target = e.target;
  // 以Chrome为例，原生下载按钮带有title="下载"属性，其他浏览器需调整判断条件
  if (target.closest('video#myVid') && target.title === '下载') {
    // 执行统计逻辑
    console.log('原生控件下载按钮被点击');
    // analytics.track('video_download_native', { videoId: 'myVid' });
  }
});

方法B：访问Shadow DOM（仅现代浏览器支持） #

Chrome、Edge等浏览器的原生视频控件存放在Shadow DOM中，可尝试获取后监听：

const video = document.getElementById('myVid');
// 等待控件加载完成
setTimeout(() => {
  const shadowRoot = video.shadowRoot;
  if (shadowRoot) {
    const downloadBtn = shadowRoot.querySelector('[title="下载"]');
    if (downloadBtn) {
      downloadBtn.addEventListener('click', () => {
        console.log('原生下载按钮被点击');
        // 执行统计逻辑
      });
    }
  }
}, 1000);

注意：该方法兼容性差，不同浏览器的Shadow DOM结构差异大，不推荐用于生产环境。

内容的提问来源于stack exchange，提问作者lovelesh agrawal