使用Tippy.js解决HTML5视频在Chrome中不自动播放的问题

本文旨在解决在tippy.js工具提示中嵌入html5视频时，视频在chrome浏览器中无法自动播放的问题，即便已设置autoplay、muted和playsinline属性。我们将探讨导致此现象的原因，并提供一种可靠的解决方案，通过利用tippy.js的onshow事件结合settimeout函数，手动触发视频播放，确保在动态内容环境中视频能够按预期自动播放。

背景与问题分析

HTML5视频的自动播放功能在现代浏览器中受到了严格的限制，尤其是Chrome。为了提升用户体验和减少数据消耗，浏览器通常要求视频必须是静音的（muted），并且/或者用户必须与页面有过交互，才能自动播放。即使视频设置了autoplay、muted和playsinline属性，在某些动态加载或注入内容的场景下，如Tippy.js工具提示内部，Chrome浏览器可能仍然会阻止视频自动播放。这通常是由于浏览器对这些动态内容的上下文判断，或者DOM渲染时序问题导致的。Firefox和Safari等浏览器在这方面可能更为宽松，因此会出现跨浏览器行为不一致的现象。

当我们将一个包含视频的HTML结构作为Tippy.js的content选项，并设置allowHTML: true时，Tippy.js会在工具提示显示时动态创建并插入这段HTML。此时，视频元素的autoplay属性可能无法被浏览器正确识别或执行，需要我们通过JavaScript进行手动干预。

解决方案：利用Tippy.js的onShow事件

解决此问题的核心思路是在Tippy.js工具提示显示时，通过JavaScript代码手动调用视频元素的play()方法。Tippy.js提供了丰富的生命周期事件，其中onShow事件在工具提示即将显示但尚未完全可见时触发，是执行此操作的理想时机。

为了确保视频元素在DOM中完全可用并避免潜在的竞态条件，我们可以在onShow事件中使用一个微小的setTimeout延迟来调用play()方法。

立即学习“前端免费学习笔记（深入）”；

1. HTML结构

首先，我们需要一个包含视频的HTML结构，通常将其放在一个隐藏的容器中，作为Tippy.js工具提示的内容源。

标签： css javascript java html js html5 编码 浏览器 回调函数 工具 safari css样