使用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工具提示的内容源。

GemDesign

AI高保真原型设计工具

652

查看详情

<!-- 页面中的触发元素 -->
<h1 class="card">CARD 1</h1>
<h1 class="card">CARD 2</h1>

<!-- 视频内容容器，初始隐藏 -->
<div class="modal">
  <div>
    <video loop muted playsinline autoplay>
        <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">
      </video>
  </div>
</div>

<!-- 引入Tippy.js和Popper.js -->
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>

请注意，视频标签中仍然保留了loop、muted、playsinline和autoplay属性。虽然autoplay可能不会直接生效，但其他属性对于确保视频能够静音播放和在移动设备上内联播放至关重要。

2. CSS样式

为了隐藏原始的视频内容容器，并为视频和触发元素提供基本样式，可以使用以下CSS：

.modal {
  display: none; /* 隐藏原始的视频容器 */
}

video {
  width: 40vw; /* 设置视频宽度 */
}

.card {
  padding-top: 10vh; /* 为触发元素添加一些内边距 */
}

h1{
  display:inline;
  margin:1em;
}

3. JavaScript逻辑

关键的JavaScript逻辑在于Tippy.js的初始化配置。我们将视频内容从.modal元素中获取，并将其作为content传递给Tippy.js。然后，在onShow事件中，我们定位到工具提示内部的视频元素并手动触发播放。

// 获取视频内容
const modal = document.querySelector('.modal');
const modalContent = modal.innerHTML; // 获取其内部HTML作为tooltip内容

// 初始化Tippy.js
tippy('.card', {
  content: modalContent, // 使用预定义的HTML内容
  allowHTML: true,       // 允许HTML内容
  interactive: true,     // 允许与tooltip内容交互
  animation: 'shift-away', // 动画效果
  followCursor: true,    // tooltip跟随鼠标
  arrow: false,          // 不显示箭头
  onShow(instance) {
    // 当tooltip即将显示时触发
    // 使用setTimeout确保DOM完全就绪，并避免潜在的竞态条件
    setTimeout(() => {
      // 在tooltip实例（instance）的popper元素中查找视频标签
      let video = instance.popper.getElementsByTagName('video')[0];
      if (video) {
        video.currentTime = 0; // 将视频播放时间重置到开头
        video.play().catch(error => {
          // 捕获并处理播放错误，例如用户手势未授权等
          console.error('视频播放失败:', error);
        });
      }
    }, 1); // 极小的延迟，通常足以解决时序问题
  },
  // onShown 事件在动画结束后触发，但可能不适用于此场景，
  // 实践证明 onShow 结合 setTimeout 更可靠。
});

代码解释：

• const modalContent = modal.innerHTML;：我们首先获取.modal元素的内部HTML，这将是Tippy工具提示的实际内容。
• onShow(instance)：这是Tippy.js提供的一个回调函数，在工具提示开始显示动画之前被调用。instance参数代表当前的Tippy实例。
• setTimeout(() => { ... }, 1);：这个微小的延迟（1毫秒）至关重要。它将视频播放的逻辑放入事件队列的末尾，确保在浏览器完成DOM渲染和布局之后再尝试播放视频，从而解决可能因时序问题导致的播放失败。
• let video = instance.popper.getElementsByTagName('video')[0];：instance.popper是Tippy.js创建的实际工具提示DOM元素。我们通过它来查找其中嵌入的video标签。注意： 这里的关键是查找instance.popper内部的视频，而不是原始的.modal元素。
• video.currentTime = 0;：这是一个可选但推荐的步骤，确保每次工具提示显示时视频都从头开始播放。
• video.play().catch(error => { ... });：调用play()方法来启动视频。play()方法返回一个Promise，因此捕获潜在的播放错误（例如，如果浏览器出于某种原因仍然阻止播放）是一个好的实践。

注意事项与最佳实践

1. 用户体验： 尽管静音视频通常允许自动播放，但频繁或意外的自动播放视频可能会打扰用户。请确保这种设计符合整体用户体验目标。
2. 性能考虑： 在工具提示中加载和播放大型视频可能会影响页面性能，尤其是在移动设备上。考虑视频文件大小、编码和加载策略。
3. 替代方案： 如果自动播放不符合需求或持续遇到问题，可以考虑在工具提示中放置一个带有播放按钮的视频，让用户手动触发播放。
4. 错误处理： video.play()返回一个Promise，捕获其拒绝状态可以帮助你了解视频播放失败的原因，例如浏览器策略限制。
5. 浏览器兼容性： 尽管此方案主要针对Chrome，但在其他浏览器中也应进行测试，确保行为一致。
6. onShow vs onShown： 在Tippy.js中，onShow在工具提示开始动画时触发，onShown在动画结束后触发。对于视频播放，通常onShow更合适，因为它能更早地尝试播放，而setTimeout可以弥补可能存在的时序问题。如果使用onShown，可能会导致视频在工具提示完全显示后才开始播放，用户体验稍差。

总结

通过结合Tippy.js的onShow事件和setTimeout延迟，我们可以有效地绕过Chrome浏览器在动态内容中对HTML5视频自动播放的一些限制。这种方法允许我们精确控制视频的播放时机，确保在用户悬停或点击触发工具提示时，静音视频能够按预期自动播放，从而提供更流畅的用户体验。务必注意视频文件大小、用户体验以及潜在的播放错误处理，以构建健壮的交互式组件。

以上就是使用Tippy.js解决HTML5视频在Chrome中不自动播放的问题的详细内容，更多请关注php中文网其它相关文章！