html5按顺序播放mp4
没错，我文抄公又来了，这回抄一个按顺序的列表：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-show"> > </button>-->
<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 = lis.getAttribute("value");
}
//绑定单击事件
for(var i=0;i<lis.length;i++){
lis.onclick = function(){
for(var j=0;j<lis.length;j++){
if(lis == this){
video.setAttribute("src",this.getAttribute("value"));
video.setAttribute('autoplay','autoplay');
this.innerHTML = '> '+this.innerHTML;
this.className = "select";
curr = j+1;
}else{
lis.innerHTML = lis.getAttribute("title");
lis.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);
lis.innerHTML = '> '+lis.innerHTML;
lis.className = "select";
video.addEventListener('ended', play);
//play();
function play() {
video.src = url;
video.load(); // 如果短的话，可以加载完成之后再播放，监听 canplaythrough 事件即可
video.play();
for(var j=0;j<lis.length;j++){
if(j == curr){
video.setAttribute("src",lis.getAttribute("value"));
video.setAttribute('autoplay','autoplay');
lis.innerHTML = '> '+lis.innerHTML;
lis.className = "select";
}else{
lis.innerHTML = lis.getAttribute("title");
lis.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自行下载或直接引用官方的。
为什么html5已经有video标签还要开发视频插件？
因为video标签不作处理的话，播放mp4会发生音画不同步的现象，画面滞后声音，有时根本没法看。
页:
[1]