带Alpha通道的WEBP序列、WEBM文件能否实现鼠标水平悬停scrub功能？

完全可以实现你描述的交互效果——鼠标悬停时通过水平移动 scrub 切换帧，未悬停时保持静止。下面针对你提供的两种媒体格式分别给出原生实现方案：

一、WEBM视频方案（推荐，文件更小、加载更高效） #

因为你的WEBM是全关键帧配置，帧定位无延迟，非常适合做scrub交互，同时Alpha通道能在现代浏览器中正常渲染。

实现思路 #

1. 隐藏视频原生控件，设置静音（规避自动播放限制）
2. 监听容器的mousemove事件，根据鼠标水平位置计算对应视频时长比例，直接设置currentTime实现帧跳转
3. 监听mouseleave事件，暂停视频并保持当前帧

代码示例 #

<!-- HTML -->
<div class="video-scrub-container">
  <video id="scrubVideo" muted playsinline>
    <source src="redish_turnaround.webm" type="video/webm">
  </video>
</div>

/* CSS */
.video-scrub-container {
  position: relative;
  width: 800px; /* 自定义容器宽度 */
  cursor: ew-resize;
}

#scrubVideo {
  width: 100%;
  display: block;
  object-fit: contain;
  pointer-events: none; /* 让鼠标事件透传到容器 */
}

// JavaScript
const videoContainer = document.querySelector('.video-scrub-container');
const video = document.getElementById('scrubVideo');
let isHovering = false;

// 预加载视频
video.load();

videoContainer.addEventListener('mouseenter', () => {
  isHovering = true;
});

videoContainer.addEventListener('mouseleave', () => {
  isHovering = false;
  video.pause();
});

videoContainer.addEventListener('mousemove', (e) => {
  if (!isHovering || video.duration === 0) return;
  
  // 计算鼠标水平位置占容器宽度的比例
  const scrubRatio = (e.clientX - videoContainer.offsetLeft) / videoContainer.offsetWidth;
  // 映射到视频时长
  const targetTime = scrubRatio * video.duration;
  // 设置视频当前时间（全关键帧无延迟）
  video.currentTime = targetTime;
});

二、WEBP序列方案 #

如果是多帧WEBP动画文件，可通过Canvas控制帧切换；如果是拆分的单帧WEBP序列，需预加载所有帧后再做交互。

实现思路（以单文件多帧WEBP为例） #

1. 用Canvas加载WEBP动画，获取所有帧数据
2. 监听鼠标移动计算帧索引，在Canvas上绘制对应帧
3. 鼠标离开时停留在当前绘制的帧

代码示例 #

<!-- HTML -->
<div class="webp-scrub-container">
  <canvas id="scrubCanvas"></canvas>
</div>

/* CSS */
.webp-scrub-container {
  position: relative;
  width: 800px;
  cursor: ew-resize;
}

#scrubCanvas {
  width: 100%;
  display: block;
}

// JavaScript
const canvasContainer = document.querySelector('.webp-scrub-container');
const canvas = document.getElementById('scrubCanvas');
const ctx = canvas.getContext('2d');
const webpImg = new Image();
let frames = [];
let currentFrameIndex = 0;
let isHovering = false;

// 加载WEBP序列
webpImg.src = 'redish_turnaround.webp';
webpImg.onload = () => {
  canvas.width = webpImg.width;
  canvas.height = webpImg.height;
  
  // 提取所有帧（原生API不直接支持WEBP帧提取，可结合第三方库如`libwebpjs`实现，或提前拆分单帧）
  // 若为拆分的单帧WEBP，可预加载所有帧到frames数组
  // frames = [frame1, frame2, ..., frameN];
  
  // 初始绘制第一帧
  ctx.drawImage(webpImg, 0, 0);
};

canvasContainer.addEventListener('mouseenter', () => {
  isHovering = true;
});

canvasContainer.addEventListener('mouseleave', () => {
  isHovering = false;
});

canvasContainer.addEventListener('mousemove', (e) => {
  if (!isHovering || frames.length === 0) return;
  
  const scrubRatio = (e.clientX - canvasContainer.offsetLeft) / canvasContainer.offsetWidth;
  currentFrameIndex = Math.floor(scrubRatio * frames.length);
  // 绘制对应帧
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(frames[currentFrameIndex], 0, 0);
});

注意事项 #

• 现代浏览器（Chrome、Firefox、Edge）均支持带Alpha通道的WEBM和WEBP，无需兼容旧IE
• WEBM方案无需额外处理Alpha通道，浏览器会自动渲染透明区域
• 若使用拆分的单帧WEBP序列，建议通过雪碧图或HTTP2合并请求减少加载开销

内容的提问来源于stack exchange，提问作者Manu Järvinen