用户名
Email
自动登录
找回密码
密码
登录
立即注册
只需一步,快速开始
快捷导航
论坛首页
论坛首页
ckplayer官网
ckplayer官网
mayiui官网
一款制作网页弹层的js工具
小鸟视频转码
小鸟视频转码,可以下载m3u8转码成mp4
搜索
搜索
热搜:
ckplayer
mayiui
dzX整合
dd整合
本版
帖子
用户
ckplayer
»
论坛首页
›
ckplayer
›
技术交流
›
html5按顺序播放mp4
返回列表
查看:
2037
|
回复:
1
html5按顺序播放mp4
[复制链接]
lanmfly
lanmfly
当前离线
积分
662
4
主题
70
帖子
662
积分
高级会员
高级会员, 积分 662, 距离下一级还需 338 积分
高级会员, 积分 662, 距离下一级还需 338 积分
积分
662
发消息
发表于 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-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[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自行下载或直接引用官方的。
本帖子中包含更多资源
您需要
登录
才可以下载或查看,没有账号?
立即注册
x
回复
使用道具
举报
提升卡
lanmfly
lanmfly
当前离线
积分
662
4
主题
70
帖子
662
积分
高级会员
高级会员, 积分 662, 距离下一级还需 338 积分
高级会员, 积分 662, 距离下一级还需 338 积分
积分
662
发消息
楼主
|
发表于 2024-3-25 01:52:04
|
显示全部楼层
为什么html5已经有video标签还要开发视频插件?
因为video标签不作处理的话,播放mp4会发生音画不同步的现象,画面滞后声音,有时根本没法看。
回复
使用道具
举报
返回列表
高级模式
B
Color
Image
Link
Quote
Code
Smilies
您需要登录后才可以回帖
登录
|
立即注册
本版积分规则
发表回复
回帖后跳转到最后一页
快速回复
返回顶部
返回列表