仿抖音上下滑动切换视频
前端：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>视频滑动</title>
<style type="text/css">
/* 初始化样式 */
* {
padding: 0;
margin: 0;
}
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
background-color: black;
}
.contains {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.page {
width: 100%;
height: 100%;
margin: 0;
}
</style>
<script src="js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.touchSwipe.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(
function() {
//主功能1：预加载视频
function load_video() {
$.ajax({
url: "这里放接口懂得都懂",
type: "GET",
success: function(res) {
for (var i = 0; i < res.length; i++) {
console.log(res[i])
$(".contains").append(
'<div class="page"><video width="100%" height="100%" >\
<source src=' + res[i] + ' type="video/mp4"></source></video></div>'
)
}
}
})
}
load_video()
//主功能2：视频切换
// 当前所处的页面
var page = 0;
// 若处于当前展示页面则播放视频
$(".page:eq(" + page + ") video").trigger("play")
$(".contains").click(function() {
if ($(".page:eq(" + page + ") video")[0].paused == true) {
$(".page:eq(" + page + ") video").trigger("play")
} else {
$(".page:eq(" + page + ") video").trigger("pause")
}
})
// 滑动事件监听
$(".contains").swipe({
// event代表事件,direction代表是滑动方向,distance代表滑动距离,duration代表滑动时长
swipe: function(event, direction, distance, duration, fingerCount, fingerData) {
// 判断是否为上滑并且若为最底页就禁止滑动了,$(".contains .page").length这条语句是获取当前视频总数
if (direction == "up" && page < $(".contains .page").length - 1) {
//停止播放上一个视频
$(".page:eq(" + page + ") video").trigger("pause")
//触发滑动效果
$(".contains").animate({
top: "-=100%"
}, 400)
//对切换完毕后的视频进行播放
page++
$(".page:eq(" + page + ") video").trigger("play")
}
// 判断是否为下滑并且若为最首页就禁止滑动了
else if (direction == "down" && page > 0) {
//停止播放上一个视频
$(".page:eq(" + page + ") video").trigger("pause")
//触发滑动效果
$(".contains").animate({
top: "+=100%"
}, 400)
//对切换完毕后的视频进行播放
page--
$(".page:eq(" + page + ") video").trigger("play")
}
//若为首视频仍然下滑，则触发重新加载视频效果
else if (direction == "down" && page <= $(".contains .page").length - 1) {
$(".contains").empty()
load_video()
}
//若为末视频仍然上滑，则触发更新视频效果
else if (direction == "up" && page-1 == $(".contains .page").length - 1 - 1) {
load_video()
}
}
})
}
)
</script>
</head>
<body>
<!-- 头部栏 -->
<header style="position: absolute;left: 0px;top: 0px;width:100%;height:60px;">
<div
style="display: flex;justify-content: space-around;width:100%;height:60px;padding: 18px 0;position: relative;left:0px;top:0px;color:aliceblue;font-size: 20px;z-index: 9999;font-weight: 700;opacity: .8;">
<div>推荐</div>
<div>附近</div>
</div>
</header>
<!-- 视频加载区 -->
<div class="contains">
</div>
<!-- 末尾栏 -->
<footer style="position: absolute;left: 0px;bottom: 0px;width:100%;height:60px;">
<div
style="display: flex;justify-content: space-around;width:100%;height:60px;padding: 25px 0;position: relative;left:0px;top:0px;color:aliceblue;font-size: 14px;z-index: 9999;font-weight: 700;opacity: .8;">
<div>首页</div>
<div>上传</div>
<div>我的</div>
</div>
</footer>
</body>
</html>
后端（Python）：
from flask import Flask,request,jsonify
from flask_cors import CORS
from random import sample
import os
# 初始化
app = Flask(__name__,static_folder='./video')
# 跨域
CORS(app, supports_credentials=True)
#获取视频信息的接口
@app.route('/showinfo',methods=["GET"])
def showinfo():
#服务器ip地址
server_ip = "127.0.0.1:5000"
#获取当前存储的所有视频
all_video = os.listdir("./video")
#对视频名进行重新规范
all_url = [os.rename("./video/"+i,"./video/"+i.replace("#","").replace(" ","").replace("@","").replace("“","")) for i in all_video]
#构建视频链接
all_url = ["http://"+server_ip+"/video/"+i for i in all_video]
#随机获取10个视频
return jsonify(sample(all_url, 10))
#程序主入口,默认5000端口
if __name__ == "__main__":
app.run()
最后效果很理想，奈斯！！！
感谢我的谢老弟~
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 展开说说关于C#中ORM框架的用法！