这个程序就是在页面中显示要播放的多媒体文件，同时显示多媒体文件的总时间，当单击播放按钮时，将显示当前播放了的时间。但是缺了一部分代码，有关通过querySelector获取并修改div中class的值的代码。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
媒体播放示例
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);//媒体的当前播放时间 }
|
播放 |
0:00
|
0:00 |
