html5播放器
文章目录
在很多的网站中都有视频播放的功能,并且它的那个播放器有的是他们自已单独开发的,那么我今天就自已写了一个自制播放器,功能该有的还是有的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/css.css">
</head>
<body>
<h3 class="playerTitle">视频播放器</h3>
<div class="player">
<video src="mp4/chrome.mp4"></video>
<div class="slide">
<div class="slide-creat"></div>
</div>
<div class="controls">
<a href="javascript:;" class="switch fa fa-play"></a>
<a href="javascript:;" class="expand fa fa-expand"></a>
<！--注意这里是模仿进度条的-->
<div class="progress">
<div class="bar"></div>
<div class="loaded"></div>
<div class="elapse"></div>
</div>
<div class="time">
<span class="currentTime">00:00:00</span>
<span class="totalTime">00:00:00</span>
</div>
<div class="sound">
<div class="sound-hide"></div>
<div class="sound-sound"></div>
</div>
</div>
</div>
<script>
var video=document.querySelector("video");
var swt= document.querySelector(".switch");
//让视频的声音默认为0.3
video.volume=0.3;
swt.onclick=function(){
video.paused===true?video.play():video.pause();
toggleon();
}
//全屏功能
document.querySelector(".expand").onclick=function(e){
if(video.requestFullScreen){
video.requestFullScreen();
}
else if(video.webkitRequestFullScreen){
video.webkitRequestFullScreen();
}
else if(video.mozRequestFullScreen){
video.mozRequestFullScreen();
}
else if(video.msRequestFullScreen){
video.msRequestFullScreen();
}
e.preventDefault(); //阻止视频变大不能看其他的东西的方法
}
//动态的计算总时间,当浏览器可以播放音频/视频时
video.oncanplay=function(){
setTimeout(function(){
video.style.display="block";
//获取时间的总长度
var addtime=video.duration; //注意他返回的是总时间秒为单位的
document.querySelector(".totalTime").innerText=publictime(addtime);
},2000);
}
//播放的动态时间也跟着变化
video.ontimeupdate=function(){
var curent=video.currentTime;//返回的是当前的播放的秒数
document.querySelector(".currentTime").innerText=publictime(curent);
//时间更下面的width一起动态的运动起来
document.querySelector(".elapse").style.width=(curent/video.duration)*100+"%";
}
//公用按钮切换函数
function toggleon(){
for(var i=0;i<swt.classList.length;i++){
if(swt.classList[i]==="fa-play"){
swt.classList.remove("fa-play");
swt.classList.add("fa-pause");
}
else if(swt.classList[i]==="fa-pause"){
swt.classList.remove("fa-pause");
swt.classList.add("fa-play");
}
}
}
//时间的公用部分
function publictime(time){
var hour=Math.floor(time/3600); //计算小时
hour=hour<10?"0"+hour:hour;
var minute=Math.floor(time/60%60); //计算分钟
minute=minute<10?"0"+minute:minute;
var second=Math.floor(time%60); //计算秒数
second=second<10?"0"+second:second;
return hour+":"+minute+":"+second;
}
//点击透明的进度条进行快进播放
document.querySelector(".bar").onclick=function(e){
var remove=e.offsetX/this.offsetWidth;
var cur=remove*video.duration;
video.currentTime=cur;
}
//当播放结束的时候就将值变为默认的
video.onended=function(){
video.currentTime=0;
swt.classList.remove("fa-pause");
swt.classList.add("fa-play");
}
//点击视频是也可以播放
video.onclick=function(){
video.paused===true?video.play():video.pause();
toggleon();
}
//控制视频的声音大小
document.querySelector(".sound-hide").onclick=function(e){
document.querySelector(".sound-sound").style.width=e.offsetX+"px";
var width=document.querySelector(".sound").offsetWidth;
video.volume=e.offsetX/width;
}
//动画函数
function animate(obj, target,property) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var leader = obj.offsetWidth;
var step = 10;
step = leader < target ? step : -step;
if (Math.abs(leader - target) >= Math.abs(step)) {
leader = leader + step;
obj.style[property]= leader + "px";
} else {
obj.style[property] = target + "px";
clearInterval(obj.timer);
}
}, 15);
}
//点击slide-creat按钮然他做动画
document.querySelector(".slide-creat").onclick=function(){
var slide=document.querySelector(".slide");
if(slide.offsetWidth===0){
animate(slide,200,"width");
this.style.left="-30px";
this.style.borderColor="transparent transparent transparent gray";
}
else{
this.style.left="-60px";
this.style.borderColor="transparent gray transparent transparent";
animate(slide,0,"width");
}
}
</script>
</body>
</html>
效果图如下:
总结：前面的代码有几个事件函数他是HTML5中的音频事件的，如果不懂得话,可以去w3c查看下
