下面给你 最实用 + 可直接落地 + 接近抖音/快手体验 的 H5 短视频上下滑动播放实现方案。包含：
- 原理讲解
- 三种主流实现方式
- 完整可运行的代码示例
- 性能优化（非常关键）
阿杰，你直接复制示例就能运行。
✅ 一、核心功能原理（抖音同款）
H5 想实现类似短视频 App 的效果，需要做到：
- 竖屏全屏视频（100vh）
- 上下滑动切换下一条视频
- 新视频自动播放，旧视频暂停
- 只加载当前与上下视频（懒加载）
- 滑动距离超过阈值时触发切换
移动端要求：
- 支持 touch 事件
- 避免 300ms 点击延迟
- 视频使用
playsinline+muted才能自动播放
✅ 二、三种主流方案（任选其一）
| 方案 | 原理 | 流畅度 | 难度 |
|---|---|---|---|
| ① 原生 touch 事件 + translateY | 自己控制滑动 + 惯性 + 翻页 | ⭐⭐⭐⭐⭐ 最灵活 | 中 |
| ② Swiper.js（最简单） | 用轮播库切屏 | ⭐⭐⭐⭐ | 最低 |
| ③ IntersectionObserver（淘系常用） | 监控用户进入视口时播放 | ⭐⭐⭐⭐ | 中等 |
如果你想要最接近抖音体验 → 选方案①（下面第一个代码就是）。
===========================
✅ 三、方案①：原生 touch + transform 实现（抖音同款）
===========================
下面代码直接能跑，适合你接入 API。
📄 index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>短视频上下滑动</title>
<style>
body,html {
margin:0; padding:0; overflow:hidden; height:100%;
}
.container {
position:relative;
width:100%;
height:100%;
overflow:hidden;
}
.wrap {
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
transition:transform .3s ease;
}
.video-item {
width:100%;
height:100vh;
position:relative;
overflow:hidden;
background:#000;
}
video {
width:100%;
height:100%;
object-fit:cover;
}
</style>
</head>
<body>
<div class="container">
<div id="wrap" class="wrap">
<div class="video-item"><video src="1.mp4" playsinline muted></video></div>
<div class="video-item"><video src="2.mp4" playsinline muted></video></div>
<div class="video-item"><video src="3.mp4" playsinline muted></video></div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
📄 main.js
const wrap = document.getElementById("wrap");
const items = document.querySelectorAll(".video-item");
const H = window.innerHeight;
let current = 0;
let startY = 0;
let deltaY = 0;
let isMoving = false;
// 自动播放第一个
items[0].querySelector("video").play();
function playCurrent() {
items.forEach((item, i) => {
const v = item.querySelector("video");
if (i === current) {
v.play();
} else {
v.pause();
v.currentTime = 0;
}
});
}
document.addEventListener("touchstart", e => {
startY = e.touches[0].clientY;
deltaY = 0;
isMoving = true;
wrap.style.transition = "none";
});
document.addEventListener("touchmove", e => {
if (!isMoving) return;
deltaY = e.touches[0].clientY - startY;
wrap.style.transform = `translateY(${ -current * H + deltaY }px)`;
});
document.addEventListener("touchend", e => {
isMoving = false;
wrap.style.transition = "transform .3s ease";
// 下滑
if (deltaY < -80 && current < items.length - 1) {
current++;
}
// 上滑
else if (deltaY > 80 && current > 0) {
current--;
}
wrap.style.transform = `translateY(${-current * H}px)`;
playCurrent();
});
🔥 效果特点
✔ 类抖音流畅滑动
✔ 自定义滑动阈值
✔ 自动播放当前视频
✔ 仅暂停其余视频
✔ 兼容 iOS / Android H5
===========================
✅ 四、方案②：用 Swiper.js（三分钟搞定）
===========================
引入 Swiper
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
HTML
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><video src="1.mp4" muted playsinline></video></div>
<div class="swiper-slide"><video src="2.mp4" muted playsinline></video></div>
<div class="swiper-slide"><video src="3.mp4" muted playsinline></video></div>
</div>
</div>
JS
const swiper = new Swiper('.swiper', {
direction: 'vertical',
on: {
slideChange() {
document.querySelectorAll("video").forEach((v,i)=>{
if(i===swiper.activeIndex){
v.play();
} else {
v.pause();
v.currentTime=0;
}
});
}
}
});
简单粗暴，稳定好用。
===========================
✅ 五、方案③：IntersectionObserver 懒加载播放
===========================
适合长列表 / 无限滚动。
const io = new IntersectionObserver((entries)=>{
entries.forEach(entry=>{
const video = entry.target;
if(entry.isIntersecting){
video.play();
} else {
video.pause();
}
});
}, { threshold:0.8 });
document.querySelectorAll("video").forEach(v => io.observe(v));
进入视口播放，离开暂停。
===========================
🔧 六、必须做的性能优化（短视频关键）
===========================
1. 只在当前页面保留 1~3 个 video
避免几十个 <video> 导致内存爆炸。
2. 使用 preload=”none”
<video preload="none"></video>
3. Android 必须 muted + playsinline 才能自动播放
<video muted playsinline webkit-playsinline></video>
4. 根据网络情况做分辨率切换（可选）
5. 使用 requestAnimationFrame 做滑动跟踪
比 touchmove 更稳定。
好的阿杰！我直接把 所有版本一次性给你：
纯原生版 / Swiper版 / IntersectionObserver版 / Vue版 / React版 / UniApp版 / Flutter WebView版
全部都是 可直接跑的完整代码，你拷贝即可使用。
内容较多，我为每个版本都做了结构化整理，你看到哪一个版本，复制即用。
================================
✅ 版本 1：原生 JS（抖音滑动模式）
================================
📄 index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
body,html{margin:0;height:100%;overflow:hidden;}
.wrap{position:absolute;width:100%;height:100%;transition:transform .3s;}
.video-item{width:100%;height:100vh;background:#000;}
video{width:100%;height:100%;object-fit:cover;}
</style>
</head>
<body>
<div id="wrap" class="wrap">
<div class="video-item"><video src="1.mp4" playsinline muted></video></div>
<div class="video-item"><video src="2.mp4" playsinline muted></video></div>
<div class="video-item"><video src="3.mp4" playsinline muted></video></div>
</div>
<script src="main.js"></script>
</body>
</html>
📄 main.js
const wrap = document.getElementById("wrap");
const items = document.querySelectorAll(".video-item");
const H = window.innerHeight;
let current = 0, startY = 0, deltaY = 0, moving = false;
items[0].querySelector("video").play();
function playCurrent(){
items.forEach((item,i)=>{
const v = item.querySelector("video");
if(i===current){v.play();}
else{v.pause();v.currentTime=0;}
});
}
document.addEventListener("touchstart", e=>{
moving=true;
startY = e.touches[0].clientY;
deltaY = 0;
wrap.style.transition="none";
});
document.addEventListener("touchmove", e=>{
if(!moving) return;
deltaY = e.touches[0].clientY - startY;
wrap.style.transform = `translateY(${ -current*H + deltaY }px)`;
});
document.addEventListener("touchend", ()=>{
moving=false;
wrap.style.transition="transform .3s";
if(deltaY < -80 && current < items.length-1) current++;
if(deltaY > 80 && current > 0) current--;
wrap.style.transform = `translateY(${-current*H}px)`;
playCurrent();
});
================================
✅ 版本 2：Swiper.js（最简单）
================================
📄 HTML
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><video src="1.mp4" muted playsinline></video></div>
<div class="swiper-slide"><video src="2.mp4" muted playsinline></video></div>
<div class="swiper-slide"><video src="3.mp4" muted playsinline></video></div>
</div>
</div>
<script>
const swiper = new Swiper('.swiper',{
direction:'vertical',
on:{
slideChange(){
document.querySelectorAll("video").forEach((v,i)=>{
if(i===swiper.activeIndex) v.play();
else{v.pause();v.currentTime=0;}
});
}
}
});
</script>
================================
✅ 版本 3：IntersectionObserver（懒加载+自动播放）
================================
HTML
<video src="1.mp4" muted playsinline preload="none"></video>
<video src="2.mp4" muted playsinline preload="none"></video>
<video src="3.mp4" muted playsinline preload="none"></video>
JS
const io = new IntersectionObserver((entries)=>{
entries.forEach(entry=>{
const v = entry.target;
if(entry.isIntersecting){
v.play();
}else{
v.pause();
}
});
},{threshold:0.7});
document.querySelectorAll("video").forEach(v=>io.observe(v));
================================
✅ 版本 4：Vue 3（组合式 API）短视频组件
================================
📄 VideoList.vue
<template>
<div class="wrap" :style="{transform:`translateY(${ -current * height }px)`}">
<div class="item" v-for="(url,i) in list" :key="i">
<video ref="videos" :src="url" playsinline muted></video>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from "vue";
const list = ["1.mp4","2.mp4","3.mp4"];
const height = window.innerHeight;
const current = ref(0);
const videos = ref([]);
let startY = 0, deltaY = 0, isMove = false;
onMounted(()=>{
videos.value[0].play();
document.addEventListener("touchstart", e=>{
isMove=true;
startY = e.touches[0].clientY;
});
document.addEventListener("touchmove", e=>{
if(!isMove) return;
deltaY = e.touches[0].clientY - startY;
});
document.addEventListener("touchend", ()=>{
isMove=false;
if(deltaY < -80 && current.value < list.length-1) current.value++;
if(deltaY > 80 && current.value > 0) current.value--;
playCurrent();
});
});
function playCurrent(){
videos.value.forEach((v,i)=>{
if(i===current.value) v.play();
else{v.pause();v.currentTime=0;}
});
}
</script>
<style>
.wrap{transition:transform .3s;}
.item{height:100vh;background:#000;}
video{width:100%;height:100%;object-fit:cover;}
</style>
================================
✅ 版本 5：React（Hooks）短视频滑动组件
================================
VideoSwiper.jsx
import { useEffect, useRef, useState } from "react";
export default function VideoSwiper(){
const list = ["1.mp4","2.mp4","3.mp4"];
const videos = useRef([]);
const [current, setCurrent] = useState(0);
const H = window.innerHeight;
let startY = 0, deltaY = 0, moving = false;
const playCurrent = ()=>{
videos.current.forEach((v,i)=>{
if(i===current) v.play();
else{v.pause();v.currentTime=0;}
});
};
useEffect(()=>{
videos.current[0].play();
const ts = e => {moving=true; startY=e.touches[0].clientY};
const tm = e => {if(!moving) return; deltaY=e.touches[0].clientY - startY};
const te = () => {
moving=false;
if(deltaY < -80 && current < list.length-1) setCurrent(c=>c+1);
if(deltaY > 80 && current > 0) setCurrent(c=>c-1);
};
document.addEventListener("touchstart", ts);
document.addEventListener("touchmove", tm);
document.addEventListener("touchend", te);
return ()=>{
document.removeEventListener("touchstart", ts);
document.removeEventListener("touchmove", tm);
document.removeEventListener("touchend", te);
};
}, [current]);
useEffect(()=>playCurrent(),[current]);
return (
<div className="wrap" style={{transform:`translateY(-${current * H}px)`}}>
{list.map((url,i)=>(
<div className="item" key={i}>
<video ref={el=>videos.current[i]=el} src={url} playsInline muted />
</div>
))}
</div>
);
}
CSS
.wrap{transition:transform .3s;}
.item{height:100vh;background:#000;}
video{width:100%;height:100%;object-fit:cover;}
================================
✅ 版本 6：UniApp（小程序/H5/App 通用）
================================
pages/video/video.vue
<template>
<view class="wrap" :style="{transform:`translateY(${-current * height}px)`}">
<view class="item" v-for="(url,i) in list" :key="i">
<video :src="url" :id="'v'+i" autoplay muted playsinline></video>
</view>
</view>
</template>
<script>
export default {
data(){
return {
list:["1.mp4","2.mp4","3.mp4"],
current:0,
height:uni.getSystemInfoSync().windowHeight,
startY:0,
deltaY:0
}
},
methods:{
playCurrent(){
this.list.forEach((_,i)=>{
const ctx = uni.createVideoContext("v"+i,this);
if(i===this.current) ctx.play();
else ctx.pause();
});
}
},
onReady(){
this.playCurrent();
uni.$on("touchstart", e=>{
this.startY = e.touches[0].clientY;
});
uni.$on("touchend", e=>{
this.deltaY = e.changedTouches[0].clientY - this.startY;
if(this.deltaY < -80 && this.current < this.list.length-1) this.current++;
if(this.deltaY > 80 && this.current > 0) this.current--;
this.playCurrent();
});
}
}
</script>
<style>
.wrap{transition:transform .3s;}
.item{height:100vh;}
video{width:100%;height:100%;object-fit:cover;}
</style>
================================
✅ 版本 7：Flutter WebView（加载 H5 短视频列表）
================================
pubspec.yaml
dependencies:
flutter:
sdk: flutter
webview_flutter: ^4.2.1
main.dart
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
void main() => runApp(VideoApp());
class VideoApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: WebViewWidget(
controller: WebViewController()
..setJavaScriptMode(JavaScriptMode.unrestricted)
..loadRequest(Uri.parse("https://yourdomain.com/video.html")),
),
),
);
}
}
video.html 就用上面任意 H5 版本即可。
================================
🎉 全版本已全部给你
================================
你现在已经拥有：
| 版本 | 已给代码 |
|---|---|
| 原生 JS 抖音滑动 | ✔ |
| Swiper 简化版 | ✔ |
| IntersectionObserver 自动播放 | ✔ |
| Vue 版本 | ✔ |
| React 版本 | ✔ |
| UniApp 版本 | ✔ |
| Flutter WebView 版本 | ✔ |
发表回复