模拟播放器倒计时效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模拟视频播放</title>
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="../css/aui.2.0.css">
<link rel="stylesheet" href="../css/api.css">
<style>
html,body{
background-color: #000;
width: 100%;
height: 100%;
}
header img{
position: absolute;
width: 1.5rem;
height: 1.5rem;
left: 1rem;
top: 1rem;
}
#play{
width: 3rem;
height: 3rem;
background: url(../image/message/news_start_ico.png) no-repeat;
background-size: 100% 100%;
position: absolute;
left: 50%;
top: 50%;
margin: -1.5rem 0 0 -1.5rem;
}
footer{
width: 100%;
height: 3rem;
position: fixed;
bottom: 0;
left: 0;
}
#foot-left{
width: 3rem;
height: 3rem;
float: left;
position: relative;
z-index: 100;
}
#foot-left img{
width: 1.5rem;
height: 1.5rem;
margin: 0.75rem;
}
#foot-right{
width: 100%;
height: 3rem;
line-height: 3rem;
padding-left: 3rem;
padding-right: 0.5rem;
position: relative;
z-index: -1;
-webkit-overflow-scrolling: touch;
}
#foot-right .time-a,.time-c{
height: 3rem;
width: 20%;
text-align: center;
line-height: 3rem;
color: #fff;
}
#foot-right .time-a,.time-b{
float: left;
}
#foot-right .time-c{
float: right;
}
#foot-right .time-b{
width: 60%;
height: 3rem;
}
#progress{
width: 100%;
height: 0.25rem;
margin-top: 1.35rem;
background-color: #69594f;
}
#progress .aui-progress-bar{
background-color: #fff;
}
</style>
</head>
<body>
<header><img src="../image/message/video_off_ico.png" alt=""></header>
<div id="play"></div>
<footer>
<div id="foot-left">
<img src="../image/message/news_goon_ico.png" alt="" id="play_switch">
</div>
<div id="foot-right">
<div class="time-a" id="start-time">00:00</div>
<div class="time-b">
<div class="aui-progress aui-progress-xxs" id="progress">
<div class="aui-progress-bar" id="slider"></div>
</div>
</div>
<div class="time-c" id="total-time">00:00</div>
</div>
</footer>
<script type="text/javascript" src="../script/jquery.min.js"></script>
<script>
!function (d) {
var runs = false;
var video_time = 5;
if (video_time >= 10) {
document.querySelector('#total-time').innerText = '00:'+video_time;
} else {
document.querySelector('#total-time').innerText = '00:0'+video_time;
}
d.querySelector('#play').onclick=function () {
runs = !runs;
run('slider',video_time);
}
d.querySelector('#play_switch').onclick=function () {
runs = !runs;
run('slider',video_time);
}
var settime,playtime=0;
function run(id,time) {
var i = 0,start;
if(runs){
dealswitch('start');
settime = setInterval(function () {
start = parseInt((playtime+1)*time/100);
if (start >= 10) {
document.querySelector('#start-time').innerText = '00:'+start;
} else {
document.querySelector('#start-time').innerText = '00:0'+start;
}
if(playtime != 0){
document.querySelector('#'+id).style.width = (playtime++)+'%';
} else {
document.querySelector('#'+id).style.width = (i++)+'%';
playtime = i;
}
if (playtime == 100) {
playtime = 0;
runs = !runs;
dealswitch('stop');
clearInterval(settime);
}
},time*10);
}else{
clearInterval(settime);
dealswitch('stop');
}
}
function dealswitch(operation) {
if (operation == 'stop') {
$("#play").show();
$("#play_switch").attr('src','../image/message/news_goon_ico.png');
} else {
$("#play").hide();
$("#play_switch").attr('src','../image/message/news_stop_ico.png');
}
}
}(document);
</script>
</body>
</html>
值得好好参谋。
