移动端视频自动播放的复杂帧动画采坑实现

前端

2024-01-02 16:05:54

在移动端开发中，复杂帧动画中嵌入视频播放时，开发者往往会遇到一个难题：视频无法自动播放。这是由于微信和某些浏览器的限制所致，它们禁止视频在用户未主动操作的情况下自动播放。

乍一听，这似乎是个小问题，但对于复杂帧动画来说，它却是一个不小的阻碍。帧动画依赖于连续播放的帧序列来实现动画效果，而视频无法自动播放就会打断这一流程，导致动画效果缺失。

限制的根源

视频自动播放的限制主要源于两方面：

用户体验： 自动播放的视频可能会干扰用户，尤其是当用户正在阅读或执行其他任务时。
流量消耗： 视频流媒体消耗大量的流量，自动播放会增加用户的数据开销。

结合touch事件和scroll事件的解决方案

为了解决这一限制，我们需要找到一种方法来检测用户是否已经对页面进行了交互，从而在用户允许的情况下启动视频播放。

我们可以结合touch事件和scroll事件来实现这一目的：

touch事件： 当用户触摸屏幕时触发。我们可以利用这一事件来判断用户是否已与页面交互。
scroll事件： 当用户滚动页面时触发。我们可以利用这一事件来检测视频是否已进入可视范围。

实现步骤

具体实现步骤如下：

在页面加载时，将视频设置为暂停状态。
添加touch事件监听器，当用户触摸屏幕时，调用video.play()函数播放视频。
添加scroll事件监听器，当视频进入可视范围时，调用video.play()函数播放视频。

代码示例

// 播放视频
const video = document.getElementById("myVideo");
video.pause();

// 添加touch事件监听器
document.addEventListener("touchstart", () => {
  video.play();
});

// 添加scroll事件监听器
document.addEventListener("scroll", () => {
  if (video.getBoundingClientRect().top < window.innerHeight) {
    video.play();
  }
});