html---自定义视频播放控制台
浏览数：40 /
时间：2015年06月09日
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gbk">
<style>
#box{
width:500px;
height:40px;
background:#ff0000;
border-radius:10px; <!--圆角-->
box-shadow:1px 1px 2px 2px #232; <!--阴影-->
border:1px solid #ff0000
}
.play{ <!--用css画三角形-->
width:0px;height:0px;
border-left:16px solid #fff;
border-top:12px solid rgba(255,255,255,0); <!--rgba指定颜色-->
border-bottom:12px solid rgba(255,255,255,0);
float:left;
margin-top:10px;
margin-left:10px;cursor:pointer;
}
.pause{ <!--用css画两条竖线-->
width:6px;height:18px;
border-left:4px solid #fff;
border-right:4px solid #fff;
float:left;
margin-top:10px;
margin-left:10px;cursor:pointer;
}
#progress{
float:left;
width:60%;height:8px;background:#fff;
box-shadow:1px 1px 2px 2px #232;
border-radius:5px;
margin-top:16px;
margin-left:16px;
position:relative;
}
#bar{
width:10%;height:100%;background:#ccc;border-radius:3px;
display:inline-block;position:absolute;top:0;left:0;
}
#control{
width:17px;height:17px;position:absolute;border-radius:100%;
left:0;top:-4px;background:#fff;box-shadow:1px 1px 2px 2px #132;
cursor:pointer;
}
.soundon{
width:10px;height:8px;
border-right:13px solid #fff;
border-top:6px solid rgba(255,255,255,0);
border-bottom:6px solid rgba(255,255,255,0);
float:left;
margin-top:10px;
margin-left:10px;cursor:pointer;
}
.soundoff{
width:10px;height:8px;
border-right:13px solid #000;
border-top:6px solid rgba(255,255,255,0);
border-bottom:6px solid rgba(255,255,255,0);
float:left;
margin-top:10px;
margin-left:3px;cursor:pointer;
}
#volume{
float:left;
width:15%;height:5px;background:#fff;
box-shadow:1px 1px 2px 2px #232;
border-radius:5px;
margin-top:16px;
margin-left:2px;
position:relative;
}
#volume-bar{
width:10%;height:100%;background:#ccc;border-radius:3px;
display:inline-block;position:absolute;top:0;left:0;
}
#volume-control{
width:15px;height:15px;position:absolute;border-radius:100%;
left:0;top:-4px;background:#fff;box-shadow:1px 1px 2px 2px #132;
cursor:pointer;
}
#full{
width:15px;height:15px;border:3px solid #ccc;cursor:pointer;float:left;
margin-top:10px;margin-left:15px;transition:0.5s all;
}
#full:hover{
width:20px;height:20px;border:3px solid #ccc;cursor:pointer;float:left;
margin-top:7px;margin-left:13px;
}
</style>
<script>
window.onload=function () {
//box对象
var box=document.getElementById("box");
//视频对象
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.mozRequestFullScreen()
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.onmousemove=function (e) {
var leftv=e.clientX-progress.offsetLeft-box.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>
</head>
<body>
<video src="iceage4.mp4" controls=controls id="video">
</video>
<div id="box">
<!--播放暂停按钮-->
<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>
</html>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
