文章目录
  1. 1. 效果图如下:

在很多的网站中都有视频播放的功能,并且它的那个播放器有的是他们自已单独开发的,那么我今天就自已写了一个自制播放器,功能该有的还是有的

<!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查看下

文章目录
  1. 1. 效果图如下: