<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DPlayer with Video List</title>
<link rel="stylesheet" href="css/dp.css">
<style>
#video-list {
width: 160px;
height: 100%;
position: fixed;
z-index: 99;
top: 0;
/* left: 0px; */
left: -120px;
}
.list_l {
width: 120px;
float: left;
height: 100%;
background: rgba(255, 255, 255, 0.8);
}
.list_l ul {
margin: 0;
padding: 20px 0px 20px 0px;
list-style: none;
}
.list_l ul li {
background-color: rgba(255, 255, 255, 0.4);
padding: 8px;
font-size: 14px;
border-bottom: 1px #fff solid;
cursor: pointer;
}
.list_r {
width: 40px;
float: right;
height: 100%;
background-image: url(images/l.png);
background-repeat: no-repeat;
background-position: center;
background-size: 100% auto;
background-color: rgba(255, 255, 255, 0.2);
cursor: pointer;
}
.list_l ul li.on {
color: #f00
}
.rotate-180 {
transform: rotate(180deg);
}
</style>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/DPlayer.min.js?id=21"></script>
</head>
<body>
<div id="video-list">
<div class="list_l">
<ul id="molist">
<li data-video="file/6/1.mp4" class="on">安亭小学</li>
<li data-video="file/6/2.mp4">曹王小学</li>
<li data-video="file/6/3.mp4">方泰小学</li>
<!-- 更多视频项... -->
</ul>
</div>
<div class="list_r"></div>
</div>
<div id="dplayer" class="dplayer"></div>
<script>
const dp = new DPlayer({
container: document.getElementById('dplayer'),
autoplay: true,
video: {
// 初始视频
url: 'file/6/1.mp4'
},
});
const videoList = document.getElementById('video-list').getElementsByTagName('li');
var curri = getParam("i") ? getParam("i") : 0;
if (curri >= videoList.length) {
curri = 0;
}
dp.on('ended', function() {
console.log("当前:" + curri);
curri = parseInt(curri) + 1;
if (curri >= videoList.length) {
curri = 0;
}
$("#molist li").eq(curri).click();
setTimeout(function() {
dp.play();
}, 500)
});
for (let i = 0; i < videoList.length; i++) {
videoList[i].addEventListener('click', function() {
const videoUrl = this.getAttribute('data-video');
console.warn(videoUrl);
dp.video.url = videoUrl;
dp.switchVideo({
url: videoUrl
});
dp.play();
$("#molist li").eq(i).addClass("on").siblings().removeClass("on");
});
}
$(document).ready(function() {
var iscahid = "1";
$(".list_r").click(function() {
if (iscahid == "1") {
$("#video-list").animate({
left: "0px"
});
$(".list_r").addClass("rotate-180");
iscahid = "0";
} else {
$("#video-list").animate({
left: "-120px"
});
$(".list_r").removeClass("rotate-180");
iscahid = "1";
}
});
console.warn(curri);
$("#molist li").eq(curri).click();
setTimeout(function() {
dp.play();
}, 500)
});
function getParam(paramName) {
paramValue = "", isFound = !1;
if (this.location.search.indexOf("?") == 0 && this.location.search.indexOf("=") > 1) {
arrSource = unescape(this.location.search).substring(1, this.location.search.length).split("&"), i = 0;
while (i < arrSource.length && !isFound) arrSource[i].indexOf("=") > 0 && arrSource[i].split("=")[0]
.toLowerCase() == paramName.toLowerCase() && (paramValue = arrSource[i].split("=")[1], isFound = !0), i++
}
return paramValue == "" && (paramValue = null), paramValue
}
</script>
</body>
</html>
dplayer多视频列表播放
需积分: 5 85 浏览量
2024-05-27
14:49:08
上传
评论
收藏 69.43MB RAR 举报
shipin.rar （14个子文件） 
index.exe 139KB
file 6 
1.mp4 220KB 3.mp4 2.6MB 2.mp4 67.19MB js 
hls.min.js 234KB webtorrent.min.js 260KB DPlayer.min.js 189KB dash.all.min.js 589KB DPlayer1.min.js 189KB flv.min.js 169KB jquery-3.2.1.min.js 85KB css dp.css 627B
index.html 4KB images 
l.png 4KB资源评论
