如何使用HTML/CSS/JS实现Wear OS文字的动态视频填充效果？

实现方案 #

核心原理是通过canvas实时同步视频帧，结合CSS background-clip: text 属性实现动态视频填充文字的效果，具体实现代码如下：

1. 调整HTML结构

<!-- 隐藏的视频元素，加载本地炫彩蒸汽视频素材 -->
<video id="vaporVideo" muted loop playsinline style="display: none;">
  <source src="./static/vapor-video.mp4" type="video/mp4">
</video>
<!-- 隐藏画布，用于实时绘制视频帧 -->
<canvas id="videoCanvas" style="display: none;"></canvas>
<!-- 需要填充效果的Wear OS文字元素 -->
<h1 id="wearOsText">Wear OS</h1>

请提前将目标视频素材下载到项目静态资源目录，替换上述代码中的视频路径。

2. 添加CSS样式

#wearOsText {
  /* 按需调整文字大小、字重、字体，和你现有站点风格匹配 */
  font-size: 10rem;
  font-weight: 900;
  margin: 0;
  /* 核心属性：背景裁剪到文字区域 */
  -webkit-background-clip: text;
  background-clip: text;
  /* 文字设为透明，露出背景内容 */
  color: transparent;
  /* 背景适配规则 */
  background-size: cover;
  background-position: center;
}

3. 编写JS逻辑实现帧同步

const video = document.getElementById('vaporVideo');
const canvas = document.getElementById('videoCanvas');
const ctx = canvas.getContext('2d');
const wearOsText = document.getElementById('wearOsText');

// 视频元数据加载完成后初始化
video.addEventListener('loadedmetadata', () => {
  // 画布尺寸和视频保持一致
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  // 播放视频
  video.play();
  // 启动帧更新循环
  updateVideoFrame();
});

function updateVideoFrame() {
  // 将当前视频帧绘制到画布
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
  // 将画布内容转为图片，赋值给文字背景
  wearOsText.style.backgroundImage = `url(${canvas.toDataURL('image/png')})`;
  // 逐帧更新，保证流畅度
  requestAnimationFrame(updateVideoFrame);
}

注意事项 #

• 视频素材必须放在站点同域路径下，避免跨域导致canvas读取内容失败
• 若追求更低的性能消耗，可将requestAnimationFrame替换为setTimeout(updateVideoFrame, 30)，人眼基本感知不到卡顿
• 移动端需添加playsinline属性保证视频可以正常自动播放

内容的提问来源于stack exchange，提问作者ManLikeCliff