Video的ended事件通过addEventListener绑定不生效问题求助

• 确认元素匹配和唯一性
  动态渲染场景下很容易出现绑定事件的节点并非最终插入DOM的节点：比如你提前创建了临时video节点绑定事件后，后续JSON渲染逻辑又重新生成了一次带#videoDemo1的节点插入页面，之前绑定事件的节点并未实际渲染，自然无法触发。同时要保证页面内id=videoDemo1的元素唯一，避免选择器匹配到错误节点。
• 排查autoplay策略拦截
  当前绝大多数浏览器禁止非静音视频自动播放，如果你未给video添加muted属性，autoplay实际会被浏览器拦截，视频从未进入播放状态，自然不会触发ended事件。可以先添加play事件监听验证视频是否真的启动播放：

const video = document.querySelector('#videoDemo1');
video.addEventListener('play', () => console.log('视频实际启动播放'));

• 优先使用带捕获的事件委托避免绑定时机问题
  ended事件本身不支持冒泡，所以常规事件委托默认不生效，需要开启捕获模式，绑定到页面加载阶段就存在的静态父容器即可，不需要卡元素插入时机：

// 替换parentContainer为你插入动态内容的静态父容器选择器，比如document.body
document.querySelector('parentContainer').addEventListener('ended', (e) => {
  if(e.target.id === 'videoDemo1') {
    // 你的播放结束逻辑
  }
}, true); // 第三个参数设为true开启捕获

• 排查属性和逻辑冲突
  1. 确认video未设置loop属性，开启循环播放的视频不会触发ended事件
  2. 确认没有其他逻辑对ended事件调用了preventDefault()阻止默认行为
  3. 如果视频地址是动态赋值的，建议在loadedmetadata事件回调中绑定ended事件，确保视频元数据加载完成：

  video.addEventListener('loadedmetadata', () => {
    video.addEventListener('ended', () => {
      // 你的逻辑
    })
  })
  

• 内联事件验证
  可以直接给video标签添加内联onended属性测试，快速定位问题范围：

<video id="videoDemo1" autoplay muted onended="console.log('内联事件触发')" src="视频地址"></video>

如果内联事件可以触发，说明你的JS绑定逻辑存在问题；如果内联事件也无法触发，优先排查视频源本身是否损坏、浏览器兼容问题。

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