使用tippy.js时HTML5视频在Chrome中无法自动播放的解决方法

问题描述 #

使用tippy.js时，通过设置allowHTML: true将带有loop、muted、playsinline、autoplay属性的<video>标签嵌入tooltip，视频在Firefox和Safari中可正常自动播放，但在Chrome中失效，手动调用card.querySelector('video').play()也无效果。

原JS代码 #

const modal = card.querySelector('.modal'),
            modalContent = modal.innerHTML;

tippy('.card', {
  content: modalContent,
  allowHTML: true,
  interactive: true,
  animation: 'shift-away',
  followCursor: true,
  arrow: false
});

原HTML代码 #

<div class="modal">
   <div>
      <video loop muted playsinline autoplay>
        <source src="http://localhost:8888/artifacts/wp-content/uploads/2022/05/Artifacts-Landing.mp4" type="video/mp4"> 
      </video>
   </div>
</div>

解决方案 #

核心原因 #

Chrome对自动播放的限制更为严格，动态插入到DOM中的视频（如tippy生成的tooltip内容），即使带有autoplay和muted属性，也不会自动触发播放，必须在用户交互上下文中主动调用play()方法。

修改后的代码 #

利用tippy的onShow钩子，在tooltip显示时获取视频元素并执行播放：

const modal = card.querySelector('.modal');
const modalContent = modal.innerHTML;

tippy('.card', {
  content: modalContent,
  allowHTML: true,
  interactive: true,
  animation: 'shift-away',
  followCursor: true,
  arrow: false,
  // 显示tooltip时触发播放
  onShow(instance) {
    const video = instance.popper.querySelector('video');
    if (video) {
      video.play().catch(err => {
        console.error('视频播放失败:', err);
      });
    }
  },
  // 可选：隐藏tooltip时暂停视频，避免后台消耗资源
  onHide(instance) {
    const video = instance.popper.querySelector('video');
    if (video) {
      video.pause();
    }
  }
});

关键说明 #

• onShow钩子触发时处于用户交互（如鼠标hover）的上下文中，Chrome允许在此场景下调用play()。
• 通过instance.popper获取tippy生成的tooltip容器，再从中查找视频元素，确保能正确定位到动态插入的视频。
• 保留muted属性是前提，Chrome的自动播放策略要求视频静音或用户已有交互行为。

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