自定义播放器

时间：2021-04-15 10:16:02

媒体元素
controls : 显示或隐藏用户控制界面
autoplay : 媒体是否自动播放
loop : 媒体是否循环播放
currentTime : 开始到播放现在所用的时间
duration : 媒体总时间(只读)
volume : 0.0-1.0的音量相对值
muted : 是否静音
autobuffer : 开始的时候是否缓冲加载，autoplay的时候，忽略此属性

媒体元素_2
paused : 媒体是否暂停(只读)
ended : 媒体是否播放完毕(只读)
error : 媒体发生错误的时候，返回错误代码 (只读)
currentSrc : 以字符串的形式返回媒体地址(只读)
play() : 媒体播放
pause() : 媒体暂停
load() : 重新加载媒体

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
 *{
padding: 0;
margin: 0;
}
body{
padding: 50px 500px;
}
button{
display: inline-block;
border: none;
outline: none;
background: #E0E0E0;
}
span{
display: inline-block;
}
video{
display: block;
}
.control-btn{
width: 570px;
height: 32px;
background: #E0E0E0;
padding: 7px 0 0 15px ;
}
button,img{
width: 25px;
height: 25px;
}

.progress{
position: relative;
display: inline-block;
width: 220px;
height: 8px;
background: #ccc;
margin: 2px 0 8px 5px;
border-radius: 4px;
}
.progressbar{
position: absolute;
background: purple;
width: 10px;
height: 8px;
-moz-border-radius-bottomleft: 4px;
-moz-border-radius-topleft: 4px;
}

.mouse{
position: absolute;
left: 0px;
top: -3px;
width: 10px;
height: 10px;
border-radius: 40%;
border: 1px solid #666666;
background: #999;
cursor: pointer;
}

.text{
display: inline-block;
white-space: nowrap;
margin-left: 7px;
font-size: 12px;
color: #666;
height: 20px;
line-height: 20px;
position: relative;
top: -6px;

}
.current,.duration{
width: 50px;
padding-left: 2px;
display: inline-block;
padding-bottom: 8px;
}
.volumn{
display: inline-block;
width: 70px;
height: 8px;
background: #ccc;
margin: 2px 5px 8px 5px;
border-radius: 5px;
position: relative;
}
.volumn-control{
position: absolute;
left: 2px;
top: 0;
width: 8px;
height: 8px;
border-radius: 50%;
background: purple;
cursor: pointer;
}
</style>
<!--<script src="js/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>-->
<script type="text/javascript">
 window.onload = function(){
var disX = 0;
var disX2 = 0;
var timer = null;
var oV = document.getElementById("video");
// var oControl = document.querySelector(".control-btn");

var oCurr = document.querySelector(".current");
var oDura = document.querySelector(".duration");
var oPro = document.querySelector(".progress");
var oProBar = document.querySelector(".progressbar");
var oMouse = document.querySelector(".mouse");
var oPlay = document.querySelector(".play");
var oPImg = document.querySelector(".play img");

var oMuted = document.querySelector(".muted");
var oMImg = document.querySelector(".muted img");

var oFull = document.querySelector(".full");
var oFImg = document.querySelector(".full img"); 

var oVolu = document.querySelector(".volumn");
var oVCon = document.querySelector(".volumn-control");




//播放
 oPlay.onclick = function(){
if(oV.paused){
 oV.play();
 oPImg.src = "img/play.png";
 nowTime();
 timer = setInterval(nowTime,1000);
 }else{
 oV.pause();
 oPImg.src="img/pause.png"; 
 clearInterval(timer);
 }
 }

 oDura.innerHTML = changeTime(oV.duration);

//静音

 oMuted.onclick = function(){
if( oV.muted ){ 
 oV.volume = 1;
 oMImg.src = "img/muted.png";
 oV.muted = false; 
 }
else{
 oV.volume = 0;
 oMImg.src = "img/jy.png";
 oV.muted = true;
 }
 };

function nowTime(){
 oCurr.innerHTML = changeTime(oV.currentTime);
var scale = oV.currentTime/oV.duration;
 oProBar.style.width = scale * 210 + "px";
if(scale * 210<3){
 oMouse.style.left = 0;
 }else{
 oMouse.style.left = scale * 210 -3 + "px";
 }
if(parseInt(oV.currentTime)==12){
 oPImg.src="img/pause.png"; 
 }
 console.log(oV.currentTime);
 }


function changeTime(iNum){
 iNum = parseInt( iNum );
var iH = toZero(Math.floor(iNum/3600));
var iM = toZero(Math.floor(iNum%3600/60));
var iS = toZero(Math.floor(iNum%60));
return iH + ':' +iM + ':' + iS; 
 }

function toZero(num){
return num=num>=10?num:'0' + num; 
 }


//全屏

 oFull.onclick = function(){
 oV.mozRequestFullScreen();
if(oV.mozRequestFullScreen()){
 oFImg.src = "img/min.png";
 }else{
 oFImg.src = "img/full.png";
 }

 };


//控制播放进度

 oMouse.onmousedown = function(ev){
var ev = ev || window.event;
 disX = ev.clientX - oMouse.offsetLeft;
 document.onmousemove = function(ev){
var ev = ev || window.event;
var L = ev.clientX - disX;
if(L<0){
 L = 0;
 }else if(L > 210){
 L = 210;
 }
if(L<3){
 oMouse.style.left =0;
 }else{
 oMouse.style.left = L - 3 + "px";
 }

var scale = L/210;
 oV.currentTime = scale * oV.duration;
 oCurr.innerHTML = changeTime(oV.currentTime);
 oProBar.style.width = scale * 210 + "px";
 };
 document.onmouseup = function(){
 document.onmousemove = null;
 }
return false;
 };

//控制声音大小
 oVCon.onmousedown = function(ev){
var ev = ev || window.event;
var disX2 = ev.clientX - oVCon.offsetLeft;
 document.onmousemove = function(ev){
var ev = ev || window.event;
var L = ev.clientX - disX2;
if(L<0){
 L = 0;
 }else if(L > 62){
 L = 62;
 }
 oVCon.style.left = L + "px";
var scale = L/62;
 oV.volume = scale;
 document.onmouseup = function(){
 document.onmousemove = null;
 };
return false;
 }
 }

 };
</script>
</head>
<body>
<video width="584" id="video">
<source src="img/movie.mp4" type="video/mp4"></source>
</video>
<div class="control-btn">
<button class="play"><img src="img/pause.png" alt="" /></button>
<div class="progress">
<div class="progressbar"></div>
<div class="mouse"></div>
</div>
<div class="text">
<span class="current">00:00:00</span>/<span class="duration">00:00:12</span>
</div>
<button class="muted"><img src="img/muted.png"/></button>
<div class="volumn">
<div class="volumn-control"></div>
</div>
<button class="full"><img src="img/full.png" alt="" /></button>
</div>
</body>
</html>
标签：

相关文章