前端：
<!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()
最后效果很理想，奈斯！！！
感謝我的謝老弟~