如何调用play()播放IntersectionObserver获取的视频元素？

问题核心是entry.target返回的是通用的Element类型，而play()是HTMLVideoElement特有的方法，必须先确认目标元素是视频元素再调用方法。

解决方案：添加类型检查后调用播放 #

在触发播放前，先判断目标元素是否为HTMLVideoElement实例，确保安全调用play()：

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const videoElement = entry.target;
      // 验证是否为视频元素
      if (videoElement instanceof HTMLVideoElement) {
        // 调用play()，并处理可能的播放失败（比如浏览器自动播放策略限制）
        videoElement.play().catch(error => {
          console.error('视频无法自动播放:', error);
        });
      }
    }
  });
}, { threshold: 0.5 });

补充说明 #

• 浏览器的自动播放策略可能会阻止无用户交互的视频播放，所以务必添加catch处理播放失败的情况，避免控制台报错。
• 如果你用TypeScript，能确保观察的元素都是视频的话，可以直接用类型断言entry.target as HTMLVideoElement，但保留类型检查会让代码更健壮。

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