用javascript制作网页视频播放器
html5已经实现了标签实现网页播放多媒体文件的效果,但是当播放源不止一个,这个时候就需要进行播放列表的创建并且依次播放内容了。
然而,用javascript应该如何实现呢?
首先前端代码比较简单,大致设置样式和布局即可。
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.video{
width:90%;
position: relative;
left: 3%;
}
.bd{
width: 90%;
position: absolute;
background-color: bisque;
border: solid darkslategray;
}
body{
text-align: center;
position: absolute;
left: 7.5%;
width: 90%;
}
.list{
position: relative;
padding: 5px;
left: 10%;
}
li{
width: 80%;
list-style: none;
padding: 5px;
cursor: pointer;
background: cornflowerblue;
border-bottom: solid white;
}
.current{
width: 85%;
color: crimson;
background-color: aquamarine;
position: relative;
right: 2.5%;
}
</style>
</head>
<body>
<div class="bd">
<div><h1>在线视频播放器</h1></div>
<div class="video">
<video controls="controls" autoplay="autoplay" src="video/1.webm" class="video">
</div>
<div class="list">
<ul>
<li href="source/1.webm" id='1' class="current" onclick="clp()">视频1</li>
<li href="source/2.webm" id="2" onclick="clp()">视频2</li>
<li href="source/3.webm" id="3" onclick="clp()">视频3</li>
</ul>
</div>
</div>
</body>
</html>
在网页视频播放器的功能实现过程中,具体思路如下:
将媒体文件以列表或者数组的方式来进行访问,通过不同列表项的属性刷新来完成一个比较连贯的效果。
我们可以定义一个数组dataSets用以存放媒体文件名,还可以创建一个数组vlist用来存放列表项。
同时通过定义不同标签的class值从而确定当前播放的文件,然后通过src的定义来对文件进行定位。
代码如下:
<script type="text/javascript">
//auto loop play
var vid = document.querySelector('video');
var vlist = document.querySelectorAll('li'); //生成数组
var dataSets = new Array('1.webm', '2.webm', '3.webm');
var curr = 0;
vlist[curr].innerHTML = '正在播放' + dataSets[curr];
vid.addEventListener("ended", function() {
play();
});
function play() {
vlist[2].innerHTML = '视频3';
if(curr + 1 <= 2) {
curr++;
vlist[curr - 1].className = '';
vlist[curr].className = 'current'
vid.src = 'video/' + dataSets[curr];
vlist[curr - 1].innerHTML = '视频' + curr;
vlist[curr].innerHTML = '正在播放' + dataSets[curr];
vid.play();
} else {
curr = 0;
vlist[curr + 2].className = '';
vlist[curr].className = 'current';
vid.src = 'video/' + dataSets[curr];
vlist[curr].innerHTML = '正在播放' + dataSets[curr];
vid.play();
}
}
//click play
function clp() {
var past = document.querySelector('.current');
past.className = '';
event.currentTarget.className = 'current';
vid.src = event.currentTarget.href;
var vi1 = document.getElementById("1");
var vi2 = document.getElementById("2");
var vi3 = document.getElementById("3");
vi1.innerHTML = '视频1';
vi2.innerHTML = '视频2';
vi3.innerHTML = '视频3';
event.currentTarget.innerHTML = '正在播放' + event.currentTarget.id + '.webm';
vid.src = 'video/' + event.currentTarget.id + '.webm';
}
</script>
界面的效果: