终极精品
标题:
html5视频标签video控件自定义开发属于自己的视频播放器
[打印本页]
作者:
zhoji
时间:
2018-4-7 12:42
标题:
html5视频标签video控件自定义开发属于自己的视频播放器
[attach]19985[/attach]
分析：
上图是用html5的video做的视频播放器，本来是自带默认控件的，但是默认的控件太丑了，我们想要开发属于自己的UI，可以利用css3+js来实现自己需要的效果，自己做一个比默认的更好看的html5视频播放器，体验会不同哦。上图包括播放器按钮，进度条，音量控制，全屏，全部都是自定义开发的，已经隐藏掉默认的样式了。
上代码：
下面代码是html基本架构，把整个自定义控件给架构好。
<body>
<div id="mov">
<video src="video/movie.mp4" id="video"></video><!--视频文件-->
<div id="shuiyin"></div>
<!--播放/暂停按钮-->
<div id="ctrl">
<div id="play" class="play"></div>
<!--进度条-->
<div id="progress">
<!--进程显示-->
<span id="bar">
</span>
<div id="control"></div><!--拖动点-->
</div>
<div id="sound" class="soundon"></div><!--喇叭-->
<!--声音控制-->
<!--控制条-->
<div id="volume">
<span id="volume_bar">
</span>
<div id="volume_control"></div><!--拖动点-->
</div>
<div id="full"></div>
</div>
</body>
复制代码
接着就是css+css3了就是美化了一下。同时把进度条结合了js来做的。
<style>
*{margin:0px;}
#mov{width:534px; height:300px; margin:100px auto;}
#video{width:534px; height:300px; position:absolute;}
#ctrl{width:534px; height:30px; background:rgba(0,0,0,0.5); position:relative; top:270px;}
/*播放按钮样式*/
.play{width:0px; height:0px;
border-left:12px solid #FFF;
border-top:9px solid rgba(255,255,255,0);
border-bottom:9px solid rgba(255,255,255,0); float:left; margin:6px 5px; cursor:pointer;}
.play:hover{width:0px; height:0px;
border-left:12px solid #39F;
border-top:9px solid rgba(255,255,255,0);
border-bottom:9px solid rgba(255,255,255,0); float:left; margin:6px 5px; cursor:pointer;}
/*暂停按钮样式*/
.pause{width:4px; height:16px; margin:7px 5px;
border-left:4px solid #FFF;
border-right:4px solid #FFF; float:left; cursor:pointer;}
.pause:hover{width:4px; height:16px; margin:7px 5px;
border-left:4px solid #39F;
border-right:4px solid #39F; float:left; cursor:pointer;}
#progress{float:left; width:65%; height:5px;
background:#FFF; margin:12.5px 5px; position:relative; cursor:pointer;}
#bar{width:0%; height:100%; background:#39F;
display:inline-block; position:absolute; top:0; left:0; cursor:pointer;}
#control{width:9px; height:9px; position:absolute; left:-2px; top:-3px;
border-radius:100%; background:#FFF; box-shadow:0 0 8px #3399FF;
border:1px solid #39F; cursor:pointer;}
.soundon{width:16px; height:16px; background:url(images/soundon.png); position:relative; left:390px; top:8px; cursor:pointer;}
.soundoff{width:16px; height:16px; background:url(images/soundoff.png); position:relative; left:390px; top:8px; cursor:pointer;}
#volume{float:left; width:15%; height:5px;
background:#FFF; margin:-3px 30px;position:relative; cursor:pointer;}
#volume_bar{width:85%; height:100%; background:#39F;
display:inline-block; position:absolute; top:0; left:0; cursor:pointer;}
#volume_control{width:9px; height:9px; position:absolute; left:60px; top:-3px;
border-radius:100%; background:#FFF; box-shadow:0 0 8px #3399FF;
border:1px solid #39F; cursor:pointer;}
#full{width:20px; height:20px; background:url(images/full.png); float:left;
margin-left:120px; margin-top:-11px; cursor:pointer;}
#shuiyin{width:534px; height:300px; background:url(images/shuiyin.png); position:absolute; top:100px;}
</style>
复制代码
剩下的就是js了，js关系到播放暂停，进度条实时进度，拖拽，音量控制，全屏等功能。
<script>
window.onload=function(){
//ctrl对象
var ctrl=document.getElementById("ctrl");
//视频对象
var video=document.getElementById("video");
//播放按钮
var play=document.getElementById("play");
//进度条
var progress=document.getElementById("progress");
//蓝色进度条
var bar=document.getElementById("bar");
//控制点
var control=document.getElementById("control");
//喇叭
var sound=document.getElementById("sound");
//全屏事件
var full=document.getElementById("full");
full.addEventListener("click",function(){
video.webkitRequestFullScreen();
},false)
//获取当前动作
play.onclick=function(){
if(video.paused){
play.className="pause";
video.play();
}else{
play.className="play";
video.pause();
}
}
//进度条跟踪事件
video.addEventListener("timeupdate",function(){
var scales=video.currentTime/video.duration;
bar.style.width=progress.offsetWidth*scales+"px";
control.style.left=progress.offsetWidth*scales+"px";
},false);
//进度条拖拽
control.onmousedown=function(e){
video.pause();
document.onmousedown=function(e){
var leftv=e.clientX-progress.offsetLeft-ctrl.offsetLeft;
if(leftv<=0){
leftv=0;
}
if(leftv>=progress.offsetWidth){
leftv=progress.offsetWidth;
}
control.style.left=leftv+"px"
}
document.onmouseup=function(){
var scales=control.offsetLeft/progress.offsetWidth;
video.currentTime =video.duration*scales;
video.play();
document.onmousemove=null;
document.onmousedown=null;
}
}
sound.onclick=function(){
if(video.muted){
video.muted=false;
sound.className="soundon";
}else{
video.muted=true;
sound.className="soundoff";
}
}
}
</script>
复制代码
欢迎光临 终极精品 (http://www.chnspy.com/)
Powered by Discuz! X3.2