4.5 上机实践——DIY视频播放器.ppt

第4章HTML5的多媒体 4.1HTML5的多媒体元素 4.3多媒体元素的方法 4.2多媒体元素的属性 4.4多媒体元素的事件 4.5上机实践——DIY视频播放器 第一页，编辑于星期三：四点 四十三分。 4.5 上机实践——DIY视频播放器 4.5.1 实践目的 通过综合应用HTML5多媒体元素的的属性及相关事件，打造一个属于我们自己的媒体播放器，能够实现播放、暂停、快播、慢播、音量调节、显示播放进度等常用功能。通过上机实践，读者能够更加深入地理解并掌握HTML5多媒体元素的应用。 4.5.2 设计思路 要想制作一个自定义的媒体播放器，首先需要设计媒体播放器的界面，然后对界面中各功能按键添加相应的处理方法。根据以上分析，我们设定设计步骤如下。 （1）设计界面，界面分三部分：播放部分、播放进度条、播放控制工具栏。其中播放进度条可根据鼠标动作设定显示或隐藏。播放控制栏中提供的功能键包括“播放/暂停”“快播”“慢播”“增大音量”“减小音量”“静音”。 （2）添加处理方法。分别对播放进度条、功能键添加相应的处理方法。 4.5.3 实现过程 根据上面的设计思路，我们设计代码如下。 第二页，编辑于星期三：四点 四十三分。 !DOCTYPE html html meta charset=gb2312 / div div video id=video src=4_1.mp4 width=600当前浏览器不支持video元素/video /div div id=progressTime style=display:none div style=float:left progress id=progress max=100 style=width:450px /progress /div div id=showTime style=float:left;margin-left:15px/div div style=clear:both/div /div /div div 第三页，编辑于星期三：四点 四十三分。 input type=button id =btnPlay onclick=playOrPause() value=播放/ input type=button id=btnSpeedUp onclick=speedUp() value=快放 / input type=button id=btnSpeedUpDown onclick=speedDown() value=慢放 / input type=button id=btnVolumeUp onclick=volumeUp() value=提高音量 / input type=button id=btnVolumeDown onclick=volumeDown() value=降低音量 / /div /div script var speed=1; //播放速度 var volume=1; //播放音量 var video=document.getElementById(video); var playBtn=document.getElementById(btnPlay); var btnSpeedUp=document.getElementById(btnSpeedUp); var btnSpeedUpDown=document.getElementById(btnSpeedUpDown); var btnVolumeUp=document.getElementById(btnVolumeUp); var btnVolumeDown=document.getElementById(btnVolumeDown); var showTime=document.getElementById(showTime); 第四页，编辑于星期三：四点 四十三分。 video.addEventListener(timeupdate,updateProgress,false); //为播放器添加时间改变监听事件 var progress=document.getElementById(progress); progress.onclick=progressOnClick; //为progress控件添加单击事件 //播放或暂停 function playOrPause() { var progressTime=document.getElementById(progressTime); progressTime.style.display=; //显示播放进度条和时间 if(video.paused) /