簡要說明
顯示播放時間、可操控進度條，播放視頻是通過拖拽媒體文件到播放器中即可播放。
注：上一曲、下一曲未實現。
素材
效果圖
style.css文件
.mediaplayer {
height: 350px;
width: 534px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -267px;
margin-top: -175px;
box-shadow: 0px 0px 30px #555555;
border: 1px solid rgb(153, 153, 153);
}
.video {
width: 100%;
text-align: center;
background: rgba(0, 0, 0, 0.6);
padding: 0;
}
.process {
position: absolute;
height: 8px;
width: 100%;
background-color: rgba(255, 255, 255, 0.4);
margin-top: -13px;
z-index: 2;
border-radius: 10px;
display: none;
}
.process span {
position: absolute;
height: 100%;
}
.process #process-value {
border-radius: 10px;
width: 0px;
box-shadow: 0px 0px 5px #555;
background-color: #4d4d4d;
}
.process #process-sel {
display: none;
width: 1px;
background-color: #000;
}
.tooltip {
position: absolute;
z-index: 9;
display: none;
}
.tooltip span {
position: absolute;
color: #fff;
top: -45px;
font-size: 10px;
line-height: 1.4em;
border: 1px solid #CCCCCC;
border-radius: 2px;
padding: 2px 3px;
background-color: #8A8A8A;
}
.tooltip span:after,
span:before {
border: solid transparent;
content: ' ';
width: 0px;
height: 0px;
position: absolute;
top: 20px;
}
.tooltip span:after {
border-width: 5px;
border-top-color: #8A8A8A;
left: 13px;
}
.tooltip span:before {
border-width: 6px;
border-top-color: #FFFFFF;
left: 12px;
}
.controls {
position: absolute;
text-align: center;
bottom: 0px;
width: 100%;
height: 50px;
background: #d4d4d4;
}
.controls button {
height: 100%;
width: 10%;
border: none;
background-color: #00000000;
background-repeat: no-repeat;
background-position: center;
outline: none;
}
.controls #video-btn-pre {
background-image: url(../img/pre.png);
}
.controls #video-btn-pp {
background-image: url(../img/play.png);
}
.controls #video-btn-next {
background-image: url(../img/next.png);
}
.controls span {
color: #555;
position: absolute;
top: 20px;
text-shadow: 1px 1px 1px #AAAAAA;
}
.controls #curtime {
left: 15px;
}
.controls #duration {
right: 15px;
}EventUtil.js文件
var EventUtil = {
addHandler: function(element, type, handler){
if (element.addEventListener){
element.addEventListener(type, handler, false);
} else if (element.attachEvent){
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
},
preventDefault: function(event){
if (event.preventDefault){
event.preventDefault();
} else {
event.returnValue = false;
}
}
};DIYVideoPlayer.html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DIY Video Player</title>
<script type="text/javascript" src="js/EventUtil.js"></script>
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/scripts.js"></script>
</head>
<body>
<div class="mediaplayer">
<div class="video">
<video id="player" width="534" height="300" poster="img/poster.png">Video player not available.</video>
</div>
<div class="process" id="process">
<span id="process-value"></span>
<span id="process-sel"></span>
</div>
<div class="tooltip" id="tooltip">
<span id="tooltip-value">00:00</span>
</div>
<div class="controls">
<button id="video-btn-pre" />
<button id="video-btn-pp" />
<button id="video-btn-next" />
<span id="curtime">00:00</span>
<span id="duration">00:00</span>
</div>
</div>
</body>
</html>結束語
這是我在學習JavaScript時，利用所學知識綜合運用所寫，若有錯誤誤導大家，請大家留言溝通，謝謝。