通过querySelector方法获取并修改div标记中class的值

qq_38364114 2017-10-12 12:05:01

该代码效果是在页面中显示要播放的多媒体文件，同时显示多媒体文件播放的总时间，当单击播放按钮时，将显示当前播放的时间（以分：秒形式显示）。但是，缺了一部分代码，是有关通过querySelector方法获取div标记中class的值并赋予变量。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>媒体播放示例</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="布尔教育 http://www.itbool.com" />
<script>
wrapper=document.querySelector('.videochrome'),
buffer=document.querySelector('.videochrome.controls.buffer'),
playhead=buffer.querySelector('.playhead'),
play=wrapper.querySelector('.play'),
duration=wrapper.querySelector('.duration'),
currentTime=playhead.querySelector('span');

video.addEventListener('loadeddata',canplay,false);//使用事件监听准备播放
function canplay()//调用canplay函数初始化媒体
{
initControls();
}
function initControls()
{
duration.innerHTML=asTime(video.duration);//将播放时间以分秒的形式显示
play.onclick=function()
{
if(video.ended)//如果媒体播放结束，播放时间从0开始
{
video.currentTime=0;
}
video[video.paused?'play':'pause']();//通过三元运算执行播放或暂停
};
}

function asTime(t)
{
t=Math.round(t);//通过Math.round函数对获取到的时间取整
var s=t%60;//转化为分
var m=~(t/60);
return m+':'+two(s);//以分：秒的形式输出时间
}
function two(s)
{
s+="";
if (s.length<2)s="0"+s;//对秒数的位数进行判断，位数小于2时以0补位
return s;
}

video.addEventListener('play',playEvent,false);//使用事件播放
video.addEventListener('pause',pausedEvent,false);//播放暂停
video.addEventListener('ended',function()//播放结束后停止播放
{
this.pause();//显示暂停播放
},false);
function playEvent()
{
play.innerHTML='暂停';
}
function pausedEvent()
{
play.innerHTML='播放';
}

video.addEventListener('durationchange',updataSeekable,false);//播放的时长被改变
video.addEventListener('timeupdate',updatePlayhead,false);//使用事件监听方式捕捉事件
function updateSeekable()
{
duration.innerHTML=asTime(video.duration);//媒体文件的总播放时间
}
function updatePlayhead()
{
currentTime.innerHTML=asTime(video.currentTime);//媒体的当前播放时间
}
</script>
</head>
<body>
<video src="../video/01.mp4"></video>
<div class="videochrome paused">
<div class="controls">
<div class="scrub">
<table width="150" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="50" scope="row">
<button class="play" title="play">播放</button>
</td>
<td width="50" align="center">
<div class="duration">00:00</div>
</td>
<td width="50" align="center">
<div class="loaded">
<div class="buffer">
<div class="playhead">
<span>00:00</span>
</div>
</div>
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>

...全文