HTML5实战与剖析之媒体元素.doc

HTML5实战与剖析之媒体元素(5音频实例) 之前已经介绍过了HTML5中媒体元素的相关小概念，和一些事件方法。光有一些理论基础，没有实践实例是不能充分理解的，更不太可能靠小概念来进行实际操作的。所以今天为大家奉上一个有关模拟音乐播放器小例子。希望大家通过这个下例子能够更好的理解和运用HTML5中的媒体元素。 HTML代码 div class=player div class=player-block bg div class=controls a style= title=播放 id=play class=play mode-bg href=#/a a title=暂停 id=pause class=pause mode-bg href=# style=display: none;/a /div div class=seprator bg/div div class=info div id=song-name class=song-name欢迎使用音乐网播放器!/div div id=totaltime class=time00:00/div div class=s//div div id=playtime class=time100:00/div div id=tracks class=tracks bg div class=download-bar bg style=width: 0%; div class=l bgl/div div class=r bgr/div /div div id=seek-bar class=seek-bar bg style=width: 0%; div class=l bg/div div class=r bg/div div id=point class=point bg/div /div /div /div div class=seprator bg/div div class=volumn a id=mute class=mute mode-bg style=display: block;/a a id=unmute class=unmute mode-bg style=display: none;/a div class=line bg div id=volumn class=tracks div id=volumnBarclass=volumn-bar bg style=width: 100%; div class=l bg/div div class=r bg/div div id=volPoint class=point bg/div /div /div /div /div /div div class=player-r bg/div /div audio id=audio source id=s1 src=TheOldBoy.mp3/source source id=s2 src=TheOldBoy.ogg/source /audio CSS代码 .player {height: 35px;margin-left: auto;margin-right: auto;width: 980px;} .bg {background: url(../images/player.png) repeat;} .mode-bg {background: url(../images/mode.gif) repeat;} .player-block {background:#000;display: block;float: left;height: 35px;width: 820px;} .player-block .controls {float: left;height: 35px;padding-left: 5px;padding-right: 5px;width: auto;} .player-block .controls a {display: inline;margin-left: 5px;} .player-block .controls a.play,.player-block .controls a.pause {display: block;float: left;height: 30px;margin-top: 4px;width: 30px;} .player-block .controls a.