函数内video元素play事件监听失效，click事件正常，求排查思路

• 先确认事件绑定时机：函数faceDetection执行时，video是否已经处于播放状态？如果play事件在绑定前就触发了，监听自然收不到。可以在绑定play事件前打印console.log(video.paused)，如果返回false，说明视频已经在播放，此时需要直接执行play回调里的逻辑，或者重新触发一次play。

• 检查播放触发的合法性：浏览器有自动播放限制（通常需要用户交互才能播放带音频的视频），如果是通过代码调用video.play()触发播放，可能因为策略限制导致播放失败，play事件不会触发。可以给play调用加错误捕获：

video.play().catch(err => console.log('播放失败:', err));

查看是否有播放被拦截的报错。

• 验证视频加载状态：如果video的src未加载完成或加载失败，也可能无法触发play事件。可以打印video.readyState（值为4表示已加载完成可播放），或者先监听loadeddata事件，确保视频加载完成后再绑定play事件。

• 排查事件是否被拦截：有没有其他代码通过event.preventDefault()或event.stopPropagation()阻止了play事件？可以尝试用捕获模式绑定事件：

video.addEventListener('play', () => {console.log('run')}, true);

捕获模式会更早捕获事件，排查是否被冒泡阶段的代码拦截。

• 手动触发测试：在浏览器控制台直接执行video.play()，观察play回调是否触发。如果手动触发有效，问题出在原有播放触发逻辑；如果手动触发也无效，检查video的src是否正确、浏览器是否支持该视频格式。

• 顺带优化：代码中displaySize是在函数执行时获取的video.width/height，如果此时视频未加载完成，取值可能为0，建议把displaySize的定义移到play事件回调内部，确保拿到正确的尺寸。

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