html5按顺序播放mp4

lanmfly · 发表于 2024-3-7 18:27:28

没错，我文抄公又来了，这回抄一个按顺序的列表：

demo：
1.index.html
---------------

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js" ></script>
<script type="text/javascript" src="js/main.js" ></script>
<title></title>
</head>
<body>
<div id="cans">
<video controls="controls" id="video"　src="" poster="" height="720px" width="1300px">
</video>
<aside id="playList">
<header>
<h4>播放列表</h4>
</header>
<ul>
<li value="/mp4/很爱很爱你.mp4" title="很爱很爱你">很爱很爱你</li>
<li value="/mp4/因为爱情.mp4" title="因为爱情">因为爱情</li>
<li value="/mp4/无法言喻.mp4" title="无法言喻">无法言喻</li>
<li value="/mp4/爱的供养.mp4" title="爱的供养">爱的供养</li>
<li value="/mp4/我心永恒.mp4" title="我心永恒">我心永恒</li>
<li value="/mp4/爱如空气.mp4" title="爱如空气">爱如空气</li>
</ul>
<button title="收起播放列表" id="playList-hidden"> < </button>
</aside>
<button title="展开播放列表" id="playList-show1"> > </button>
</div>
</body>
</html>

复制代码

2.main.js

window.onload = function(){
var video = document.getElementById("video");
var lis = document.getElementsByTagName("li");
var vLen = lis.length; // 播放列表的长度
var url = [];
var ctrl = document.getElementById("playList-hidden");
var ctrl_show = document.getElementById('playList-show1');
var aside = document.getElementById("playList");
var curr = 1; // 当前播放的视频
for(var i=0;i<lis.length;i++){
url[i] = lis[i].getAttribute("value");
}
//绑定单击事件
for(var i=0;i<lis.length;i++){
lis[i].onclick = function(){
for(var j=0;j<lis.length;j++){
if(lis[j] == this){
video.setAttribute("src",this.getAttribute("value"));
video.setAttribute('autoplay','autoplay');
this.innerHTML = '> '+this.innerHTML;
this.className = "select";
curr = j+1;
}else{
lis[j].innerHTML = lis[j].getAttribute("title");
lis[j].className = "";
}
}
}
}
//收起播放列表
ctrl.onclick = function(){
aside.style.transition = "1s";
aside.style.transform = "translateX(-10vw)";
setTimeout(function(){
aside.style.display = "none";
ctrl_show.style.visibility= 'visible';
},"1000");
}
//展开播放列表
ctrl_show.onclick = function(){
aside.style.display = "block";
ctrl_show.style.visibility= 'hidden';
setTimeout(function(){
aside.style.transform = "translateX(0vw)";
},"0");
}
video.setAttribute('src',url[0]);
lis[0].innerHTML = '> '+lis[0].innerHTML;
lis[0].className = "select";
video.addEventListener('ended', play);
//play();
function play() {
video.src = url[curr];
video.load(); // 如果短的话，可以加载完成之后再播放，监听 canplaythrough 事件即可
video.play();
for(var j=0;j<lis.length;j++){
if(j == curr){
video.setAttribute("src",lis[j].getAttribute("value"));
video.setAttribute('autoplay','autoplay');
lis[j].innerHTML = '> '+lis[j].innerHTML;
lis[j].className = "select";
}else{
lis[j].innerHTML = lis[j].getAttribute("title");
lis[j].className = "";
}
}
curr++;
if (curr >= vLen) curr = 0; // 播放完了，重新播放
}
}

复制代码

3.style.css

*{
margin: 0 ;
border: none;
padding: 0;
}
body{
background: lightcoral;
}
#cans{
position: relative;
margin: 0 auto;
margin-top: 5vh;
height: 720px;
width: 80vw;
}
#video{
/*height: 80vh;*/
float: left;
background: black;
position: relative; /*去掉这句将会使得video优先级失效*/
z-index: 99;
}
aside{
float: left;
height: 720px;
width: 10vw;
background: black;
opacity: 0.9;
position: relative;
}
aside header h4{
color: white;
margin-bottom: 20px;
margin-top: 5px;
text-align: center;
}
aside ul{
background: black;
width: 10vw;
list-style: none;
text-align: center;
}
aside ul li{
color: white;
font-size: 14px;
line-height:30px ;
}
aside ul li:hover{
background-color: lightgray;
color: lightcoral;
font-weight: bold;
}
aside #playList-hidden {
position: absolute;
bottom: 250px;
right: 0;
width:20px ;
height: 32px;
background: lightgoldenrodyellow;
font-size: 16px;
font-weight: bold;
border-top-left-radius:10px ;
border-bottom-left-radius:10px ;
opacity: 0.5;
z-index: 10000;
}
#cans #playList-show1{
margin-top: 230px;
width:20px ;
height: 32px;
background:lightgoldenrodyellow;
font-size: 16px;
font-weight: bold;
border-top-right-radius:10px ;
border-bottom-right-radius:10px ;
opacity: 1;
visibility: hidden;
}
#cans #playList-show1:hover,aside #playList-hidden:hover{
opacity: 0.7;
}
.select{
color: lightcoral;
}

复制代码

4.效果图示

5.视频自备，jquery-1.7.2.min.js自行下载或直接引用官方的。

lanmfly · 发表于 2024-3-25 01:52:04

为什么html5已经有video标签还要开发视频插件？
因为video标签不作处理的话，播放mp4会发生音画不同步的现象，画面滞后声音，有时根本没法看。

		自动登录	找回密码
密码			立即注册

html5按顺序播放mp4

本帖子中包含更多资源