HTML5的<video>标签本身不支持上下滑动切换视频，但可通过DOM操作、触摸事件、CSS布局和JS控制多个video实例模拟抖音式体验：垂直堆叠视频卡片，仅居中视频播放并静音自动播，其余暂停隐藏；用touch事件计算滑动距离与速度判断切换，配合CSS缓动；注意预加载、内存释放、方向锁定及首次手势触发限制。
HTML5 的 <video> 标签本身不支持“上下滑动切换视频”这种交互，但可以通过结合原生 DOM 操作、触摸/滚动事件、CSS 布局和 JavaScript 控制多个 <video> 实例来模拟短视频平台（如抖音、快手）的沉浸式上下滑体验。
1. 结构设计：垂直全屏视频流
核心是把每个视频作为独立卡片，用 position: absolute 或 flex 布局堆叠在同一个视口内，只让当前“居中”的视频可见并播放，其余静音、暂停、降低 z-index 或隐藏。
- 用一个容器（如
<div class="feed">）包裹所有<video>元素，设为position: relative; height: 100vh; overflow: hidden; - 每个
<video>设为position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; - 用
data-index标记顺序，便于 JS 管理当前项
2. 播放控制：自动聚焦 + 静音优先
移动端浏览器普遍限制自动播放有声音的视频，因此必须设置 muted 和 autoplay，并确保只有当前视频处于活跃状态：
- 当前视频：添加
autoplay muted playsinline webkit-playsinline，并调用.play()（需用户手势后首次触发一次） - 其他视频：统一执行
.pause()，移除autoplay属性，设muted保持兼容性 - 建议监听
canplay后再 play，避免报错；失败时可 fallback 到 poster 图片
3. 滑动逻辑：用 touchstart/move/end 模拟“惯性滑动”
不依赖第三方库，纯 JS 实现流畅滑动切换：
立即学习“前端免费学习笔记（深入）”；
- 记录
touchstart的clientY，touchmove计算偏移量（deltaY = startY - currentY），实时 translateY 移动整个 feed 容器或单个 video 卡片 -
touchend时判断：若|deltaY| > 100px或速度足够快（可用时间差估算），则切换到上/下一个视频；否则回弹 - 配合 CSS
transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1)实现自然缓动
4. 边界与优化细节
真实场景中容易忽略但影响体验的关键点：
-
预加载策略：对当前、上一个、下一个视频设置
preload="metadata"或"auto"（慎用，注意流量） -
内存管理：离开视口较久的视频可
src = ""释放资源，或用load()延迟加载 -
方向锁定：阻止默认滚动（
e.preventDefault()），但仅限touchmove在 feed 区域内，避免禁用页面整体滚动 -
键盘/鼠标支持：可选加
keydown（↑↓）和wheel事件兼容桌面端
不复杂但容易忽略：首次播放需用户点击/触摸触发（iOS/Android 强制策略），可在首屏加一个半透明「点击开始」层，点击后初始化播放并移除该层。
