本文旨在解决在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属性，以符合浏览器自动播放的最佳实践。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tippy.js 视频自动播放教程</title> <!-- 引入Tippy.js和Popper.js的cdn链接 --> <script src="https://unpkg.com/@popperjs/core@2"></script> <script src="https://unpkg.com/tippy.js@6"></script> <!-- 自定义CSS将在此处引入或内联 --> <style> /* CSS 样式将在下一节提供 */ </style> </head> <body> <!-- 触发Tippy工具提示的元素 --> <h1 class="card">悬停查看视频</h1> <h1 class="card">另一个视频卡片</h1> <!-- 包含视频内容的模板，初始隐藏 --> <div class="modal"> <div> <video loop muted playsinline> <!-- 示例视频源，请替换为您的实际视频URL --> <source src="https://upload.wikimedia.org/wikipedia/commons/transcoded/6/6c/%22Movbild-fizika%22_falo_en_Big_Buck_Bunny.webm/%22Movbild-fizika%22_falo_en_Big_Buck_Bunny.webm.720p.vp9.webm" type="video/mp4"> 您的浏览器不支持html5视频。 </video> </div> </div> <!-- JavaScript代码将在此处引入或内联 --> <script> // JavaScript 逻辑将在下一节提供 </script> </body> </html>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工具提示中的视频自动播放功能。