Tippy.js提示框内HTML5视频自动播放策略与实现

本文详细探讨了在tippy.js提示框中嵌入html5视频时，尤其是在chrome浏览器下，视频无法自动播放的问题及其解决方案。通过利用tippy.js的`onshow`生命周期事件，并结合`settimeout`异步执行`video.play()`方法，可以有效规避浏览器对动态插入视频自动播放的限制，确保视频在提示框显示时能顺利播放，同时强调了`muted`和`playsinline`属性的重要性。

HTML5视频在Tippy.js提示框中自动播放的挑战与解决方案

在现代Web开发中，为用户提供丰富的交互体验至关重要。将HTML5视频嵌入到交互式组件（如Tippy.js提示框）中，可以显著提升用户体验。然而，浏览器对视频自动播放的严格策略，特别是Google Chrome，常常导致开发者遇到视频无法按预期自动播放的问题。即使视频元素本身带有autoplay、muted和playsinline属性，当它作为动态内容被注入到DOM中时，这些属性可能无法立即生效。

本文将深入探讨在Tippy.js提示框中实现HTML5视频自动播放的有效策略，并提供具体的实现代码。

理解浏览器自动播放策略

现代浏览器（尤其是Chrome）为了改善用户体验和节省数据流量，对视频的自动播放施加了严格限制。通常，只有满足以下条件之一的视频才允许自动播放：

1. 视频已静音（muted属性）。
2. 视频没有音轨。
3. 用户与页面进行了交互。
4. 网站已被用户标记为常用媒体网站。

当视频内容通过JavaScript动态加载到DOM中时（例如在Tippy.js提示框显示时），即使视频带有autoplay和muted属性，浏览器也可能认为这不是用户主动触发的播放，从而阻止其自动播放。

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

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

为了解决这一问题，我们需要在Tippy.js提示框显示时，通过JavaScript手动触发视频的播放。Tippy.js提供了丰富的生命周期事件，其中onShow事件在提示框即将显示时触发，是执行此操作的理想时机。

1. HTML结构准备

首先，我们需要一个包含视频元素的HTML结构，该结构将作为Tippy.js提示框的内容。为了避免在页面加载时视频容器可见，我们可以将其默认隐藏。

独响

一个轻笔记+角色扮演的app

249

查看详情

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

<!-- 触发Tippy提示框的元素 -->
<h1 class="card">悬停查看视频</h1>

<!-- 作为Tippy提示框内容的视频容器，默认隐藏 -->
<div class="modal">
  <div>
    <video loop muted playsinline>
        <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>

关键点：

• loop: 视频循环播放。
• muted: 视频静音，这是实现自动播放的关键前提。
• playsinline: 允许视频在iOS设备上内联播放，而不是全屏。
• autoplay属性在此处可以保留，但我们主要依赖JS来确保播放。
• .modal容器用于存放视频，并通过CSS默认隐藏。

2. CSS样式

为了确保.modal容器在未作为提示框内容时不可见，并对视频进行基本样式设置，我们可以添加如下CSS：

.modal {
  display: none; /* 默认隐藏视频容器 */
}

video {
  width: 40vw; /* 示例视频宽度 */
  max-width: 100%; /* 确保视频不超过父容器 */
  height: auto;
}

.card {
  padding-top: 10vh; /* 示例，为触发元素提供一些空间 */
  display:inline-block;
  margin:1em;
  cursor: pointer;
}

3. JavaScript实现：利用onShow手动播放

这是核心逻辑所在。我们将在Tippy.js的配置中添加onShow回调函数，并在其中找到视频元素并调用其play()方法。

// 获取作为Tippy内容模板的HTML字符串
const modal = document.querySelector('.modal');
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渲染完成后再尝试播放
    // 即使是1ms的延迟也足以让浏览器完成DOM更新
    setTimeout(() => {
      // 在Tippy实例的popper元素中查找视频元素
      let video = instance.popper.getElementsByTagName('video')[0];
      if (video) {
        video.currentTime = 0; // 将视频播放进度重置到开头
        video.play();          // 触发视频播放
      }
    }, 1); 
  },
  // 可以选择添加onHide事件来暂停视频
  onHide(instance) {
    let video = instance.popper.getElementsByTagName('video')[0];
    if (video) {
      video.pause(); // 隐藏时暂停视频
    }
  }
});

代码解析：

• tippy('.card', { ... }): 初始化Tippy实例，选择.card元素作为触发器。
• content: modalContent: 将之前获取的.modal内部HTML作为提示框内容。
• allowHTML: true: 必须设置为true，Tippy才能渲染HTML内容。
• onShow(instance): 这是关键的回调函数。当提示框即将显示时，instance参数提供了对当前Tippy实例的访问。
• setTimeout(() => { ... }, 1): 这是一个重要的技巧。虽然onShow在提示框显示前触发，但视频元素可能尚未完全渲染并准备好播放。通过一个微小的延迟（例如1毫秒），我们确保了浏览器有足够的时间将视频元素添加到DOM并使其可操作。
• instance.popper.getElementsByTagName('video')[0]: instance.popper指向Tippy提示框的实际DOM元素。我们通过它来查找其中的
• video.currentTime = 0;: 确保每次显示提示框时，视频都从头开始播放。
• video.play();: 调用HTMLMediaElement的play()方法，手动启动视频播放。
• onHide(instance): 这是一个可选但推荐的实践。当提示框隐藏时，暂停视频播放，以节省资源并提供更好的用户体验。

注意事项与最佳实践

1. muted属性是强制性的： 几乎所有现代浏览器都要求视频必须静音才能自动播放，除非用户明确与页面进行了交互。请务必在
2. playsinline属性： 对于移动设备，尤其是iOS，playsinline属性允许视频在网页内播放，而不是自动进入全屏模式。这对于提示框内的视频体验至关重要。
3. 错误处理： 在实际项目中，应考虑视频加载失败或不存在的情况。在调用video.play()之前，可以检查video对象是否存在，甚至监听视频的canplaythrough事件以确保视频已准备好播放。
4. 性能考量： 如果页面上有大量带有视频的Tippy提示框，同时播放所有视频可能会影响性能。onHide中暂停视频是一个好的实践。
5. 用户体验： 考虑用户是否真的希望视频自动播放。对于某些场景，等待用户点击播放按钮可能更合适。本教程主要解决的是自动播放的技术实现。

总结

通过巧妙地结合Tippy.js的生命周期事件和JavaScript对HTML5视频API的控制，我们可以有效地解决在动态生成的提示框中视频无法自动播放的问题。onShow事件与setTimeout的配合，为在浏览器严格的自动播放策略下，实现无缝的视频体验提供了一个可靠的解决方案。遵循本文提供的代码示例和最佳实践，开发者可以在其Web应用中轻松实现具有视频内容的交互式Tippy.js提示框。

以上就是Tippy.js提示框内HTML5视频自动播放策略与实现的详细内容，更多请关注php中文网其它相关文章！