本文旨在解决在tippy.js工具提示中嵌入html5视频时，视频无法在chrome等浏览器中自动播放的问题。通过利用tippy.js的`onshow`事件结合`settimeout`机制，我们可以在工具提示显示后，手动触发视频的播放，确保视频内容能够按预期展示，同时兼容浏览器的自动播放策略。
引言：Tippy.js中视频自动播放的挑战
HTML5视频的自动播放功能在现代浏览器中受到严格限制，特别是Chrome浏览器。为了提升用户体验和防止滥用，浏览器通常要求视频必须静音（muted）、内联播放（playsinline）或用户与页面有交互后才能自动播放。即使开发者在
核心解决方案：利用onShow事件手动触发播放
解决此问题的关键在于，在Tippy.js工具提示内容完全渲染并显示后，通过JavaScript手动调用视频元素的play()方法。Tippy.js提供了丰富的生命周期事件，其中onShow事件在工具提示即将显示时触发，是进行DOM操作的理想时机。
为了确保视频元素在调用play()方法时已经完全加载并存在于DOM中，我们还需要结合setTimeout机制。即使是一个极小的延迟（如1毫秒），也能有效解决因DOM渲染时序问题导致的播放失败。
实现步骤与示例代码
下面将通过具体的HTML、CSS和JavaScript代码示例，详细展示如何在Tippy.js工具提示中实现视频的自动播放。
立即学习“前端免费学习笔记（深入）”；
1. HTML 结构准备
首先，我们需要定义触发Tippy工具提示的元素，以及包含视频内容的模板。视频模板最初应设置为隐藏，以便Tippy.js可以获取其内容并在工具提示中渲染。视频标签应包含loop、muted和playsinline属性，以符合浏览器自动播放的最佳实践。
Tippy.js 视频自动播放教程
悬停查看视频
另一个视频卡片
2. CSS 样式定义
为了隐藏原始的视频模板，并为视频和触发元素提供基本样式，我们需要添加一些CSS规则。
/* 隐藏原始的视频模板，防止其在页面加载时可见 */
.modal {
display: none;
}
/* 为视频设置合适的尺寸和响应式布局 */
video {
width: 40vw; /* 示例尺寸，可根据需要调整 */
max-width: 100%;
height: auto;
display: block; /* 确保视频块级显示，避免额外空间 */
}
/* 为触发元素提供一些基础样式 */
.card {
padding-top: 10vh; /* 示例样式 */
display: inline-block; /* 允许元素并排显示 */
margin: 1em;
cursor: pointer; /* 提示用户可交互 */
color: #007bff;
text-decoration: underline;
}
.card:hover {
color: #0056b3;
}3. JavaScript 逻辑
核心的JavaScript逻辑在于初始化Tippy.js，并配置其onShow回调函数。在这个回调中，我们将使用setTimeout来获取工具提示内部的视频元素，并调用其play()方法。同时，为了更好的用户体验，我们还可以在onHidden事件中暂停视频。
// 获取包含视频内容的模板元素
const modal = document.querySelector('.modal');
// 获取模板的内部HTML内容，Tippy.js将使用此内容
const modalContent = modal.innerHTML;
// 初始化Tippy.js
tippy('.card', {
content: modalContent, // 设置工具提示的内容为视频模板的HTML
allowHTML: true, // 允许工具提示内容为HTML
interactive: true, // 允许用户与工具提示内容进行交互
animation: 'shift-away', // 设置工具提示的显示动画
followCursor: true, // 工具提示跟随鼠标移动
arrow: false, // 不显示工具提示箭头
// 当工具提示即将显示时触发
onShow(instance) {
// 使用setTimeout延迟执行，确保视频元素已完全渲染到DOM中
setTimeout(() => {
// 从Tippy实例的popper元素中查找视频标签
let video = instance.popper.getElementsByTagName('video')[0];
if (video) {
video.currentTime = 0; // 将视频播放进度重置到开头
// 尝试播放视频，并捕获潜在的播放错误
video.play().catch(error => {
console.error("视频播放失败:", error);
// 在这里可以添加用户提示，例如“视频无法自动播放，请手动点击”
});
}
}, 1); // 极小的延迟即可，例如1毫秒
},
// 当工具提示完全隐藏时触发
onHidden(instance) {
// 从Tippy实例的popper元素中查找视频标签
let video = instance.popper.getElementsByTagName('video')[0];
if (video && !video.paused) {
video.pause(); // 暂停视频播放，释放资源
}
}
});注意事项
- 浏览器自动播放策略： 即使采取了手动播放的策略，浏览器对非静音视频的自动播放仍有严格限制。确保视频带有muted属性是提高自动播放成功率的关键。playsinline属性对于移动设备上的内联播放也非常重要。
- onShow vs onShown： 在Tippy.js的生命周期事件中，onShow在工具提示即将显示时触发，而onShown在工具提示完全显示后触发。对于需要及时操作DOM元素（如视频播放）的场景，onShow通常更为可靠，因为它发生在元素刚被添加到DOM但尚未完全过渡完成的阶段。如果onShow遇到问题，可以尝试onMount事件。
- 错误处理： 调用video.play()方法可能会返回一个Promise，如果播放失败（例如，用户浏览器设置禁止媒体自动播放），Promise会reject。因此，使用.catch()来捕获潜在的播放错误并进行适当的处理（如向用户显示提示信息）是良好的编程实践。
- 性能考量： 如果页面中存在大量包含视频的Tippy工具提示，且它们可能同时显示，应考虑性能影响。在onHidden事件中暂停视频可以有效节省系统资源。
- 视频源： 确保视频源（src）是可访问的，并且type属性正确，以便浏览器能够正确解析和播放视频。
总结
通过巧妙地结合Tippy.js的生命周期事件（特别是onShow）和JavaScript的DOM操作（配合setTimeout），我们可以有效解决HTML5视频在动态加载的工具提示中无法自动播放的问题。此方法不仅增强了用户体验，确保视频内容按预期展示，还兼容了Chrome等浏览器严格的自动播放策略。遵循上述步骤和注意事项，您可以在您的项目中成功实现Tippy.js工具提示中的视频自动播放功能。
