多媒体--自定义炫酷播放器

1、多媒体自定义炫酷播放器本章节要向读者介绍video元素及Audio元素，以及它所支持的不同的视频、音频类型。1. HTML5对多媒体的支持在Web中不仅只有文本、图片,在HTML5标准发布之前，我们如果需要播放音频、视频需要借助诸如Flash Player等第三方插件来解决这个问题。后来HTML5标准发布之后，用HTML5标记在网页中添加视频、音频如同引用图片一样的简单、方便。1. Video支持视频格式视频编码和解码视频编码所谓视频编码方式就是指通过特定的压缩技术，将某个视频格式的文件转换成另一种视频格式文件的方式。视频解码用特定方法把已经编码的视频还原成它原有的格式，进行播放编码说明The

2、ora 视频编码，Theora是开放而且免费的视频压缩编码技术，由Xiph基金会发布。做为该基金会Ogg项目的一部分，从VP3 HD高清到MPEG-4/DiVX格式都能够被Theora很好的支持。 使用Theora无需任何专利许可费。Firefox和Opera将通过新的HTML5元素提供了对Ogg/Theora视频的原生支持。H.264 视频编码，H.264是在MPEG-4技术的基础之上建立起来的，H.264与以前的国际标准如H.263和MPEG-4相比，为达到高效的压缩，充分利用了各种冗余，统计冗余和视觉生理冗余。蓝光技术（Blu-ray）就采用这种格式 当前，video 元素支持三种视频格

3、式：说明Ogg带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件MPEG4带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件WebM带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件表 8-1图 8-12. Audio支持音频格式当前，Audio元素支持三种音频格式： MP3, Wav, 和 Ogg。图 8-23. Audio/Video 浏览器支持情况Audio元素浏览器支持情况图 8-3Video元素浏览器支持情况图8-42.音频和视频标签HTML5 让我们可以如同引入图片一样简单的，去引入声音、视频。1. Audio元素HTML5 规

4、定了一种通过 audio 元素来包含音频的标准方法。audio 元素能够播放声音文件或者音频流。页面添加音频提示：可以在开始标签和结束标签之间放置文本内容，这样旧的浏览器就可以显示出不支持该标签的信息。浏览器全支持我们说过浏览器对于音频格式支持情况，要让所有浏览器都可以播放音频文件，我们需要给audio引用至少2个指定格式的音频文件。我们可以通过 链接不同的音频文件，这样我们可以做到只要它支持audio标签。浏览器将使用第一个可识别的格式。您的浏览器不支持 audio，请升级浏览器。 标签的属性属性值描述autoplayautoplay标签添加上此属性，音频在就绪后马上播放。controlsc

5、ontrols标签添加上此属性，则向用户显示控件，比如播放按钮。looploop标签添加上此属性，则每当音频结束时重新开始播放。preloadpreload标签添加上此属性，则音频在页面加载时进行加载，并预备播放。如果使用 autoplay，则忽略该属性。srcurl添加要播放的音频的 URL。表 8-22. Video元素HTML5 规定了一种通过 video 元素来包含视频的标准方法。页面添加视频您的浏览器不支持video，请升级浏览器。提示：可以在开始标签和结束标签之间放置文本内容，这样旧的浏览器就可以显示出不支持该标签的信息。浏览器全支持我们说过浏览器对于视频格式支持情况，要让所有浏览

6、器都可以播放视频文件，我们需要给video引用至少2个指定格式的视频文件。我们可以通过 链接不同的视频文件，这样我们可以做到只要它支持video标签。浏览器将使用第一个可识别的格式。您的浏览器不支持video，请升级浏览器。 标签的属性属性值描述autoplayautoplay标签添加上此属性，则视频在就绪后马上播放。controlscontrols标签添加上此属性，则向用户显示控件，比如播放按钮，声音等。srcurl要播放的视频的 URL。looploop标签添加上此属性，则当媒介文件完成播放后再次开始播放。preloadpreload标签添加上此属性，则视频在页面加载时进行加载，并预备播放

7、。如果使用 autoplay，则忽略该属性。heightpixels设置视频播放器的高度。widthpixels设置视频播放器的宽度。表 8-33.音频和视频API1 .HTML5 Video在各大浏览器呈现做为开发人员，我们创建一个视频播放器时一定希望它的外观在各个浏览器中看起来一致，但是在下图中可以看到目前各个浏览器提供的视频控制工具条外观各不相同。2. Video元素HTML5 规定了一种通过 video 元素来包含视频的标准方法。页面添加视频您的浏览器不支持video，请升级浏览器。提示：可以在开始标签和结束标签之间放置文本内容，这样旧的浏览器就可以显示出不支持该标签的信息。浏览器全支

8、持在上节中，我们说过浏览器对于视频格式支持情况，要让所有浏览器都可以播放视频文件，我们需要给video引用至少2个指定格式的视频文件。我们可以通过 链接不同的视频文件，这样我们可以做到只要它支持video标签。浏览器将使用第一个可识别的格式。您的浏览器不支持video，请升级浏览器。 标签的属性属性值描述autoplayautoplay标签添加上此属性，则视频在就绪后马上播放。controlscontrols标签添加上此属性，则向用户显示控件，比如播放按钮，声音等。srcurl要播放的视频的 URL。looploop标签添加上此属性，则当媒介文件完成播放后再次开始播放。preloadprelo

9、ad标签添加上此属性，则视频在页面加载时进行加载，并预备播放。如果使用 autoplay，则忽略该属性。heightpixels设置视频播放器的高度。widthpixels设置视频播放器的宽度。表 8-33.音频和视频API1.HTML5 Video在各大浏览器呈现做为开发人员，我们创建一个视频播放器时一定希望它的外观在各个浏览器中看起来一致，但是在下图中可以看到目前各个浏览器提供的视频控制工具条外观各不相同：IE浏览器图 8-5火狐浏览器(Firefox)图8-6谷歌浏览器(Chrome)图 8-72.音频和视频API 介绍我们得自己从头来创建这个控制工具条，利用HTML和CSS再加上一些图

10、片实现起来并不算很难，另外通过HTML5多媒体元素提供的API我们可以很方便将创建的任何按钮与播放/暂停等事件进行绑定。HTML5 DOM 为 和 元素提供了方法、属性和事件。这些方法、属性和事件允许您使用 Javascript 来操作 和 元素。HTML5 Audio/Video 方法方法描述addTextTrack()向音频/视频添加新的文本轨道canPlayType()检测浏览器是否能播放指定的音频/视频类型load()重新加载音频/视频元素play()开始播放音频/视频pause()暂停当前播放的音频/视频表 8-4HTML5 Audio/Video 属性属性描述audioTracks

11、返回表示可用音轨的 AudioTrackList 对象autoplay设置或返回是否在加载完成后随即播放音频/视频buffered返回表示音频/视频已缓冲部分的 TimeRanges 对象controller返回表示音频/视频当前媒体控制器的 MediaController 对象controls设置或返回音频/视频是否显示控件（比如播放/暂停等）crossOrigin设置或返回音频/视频的 CORS 设置currentSrc返回当前音频/视频的 URLcurrentTime设置或返回音频/视频中的当前播放位置（以秒计）defaultMuted设置或返回音频/视频默认是否静音defaultPla

12、ybackRate设置或返回音频/视频的默认播放速度duration返回当前音频/视频的长度（以秒计）ended返回音频/视频的播放是否已结束error返回表示音频/视频错误状态的 MediaError 对象loop设置或返回音频/视频是否应在结束时重新播放mediaGroup设置或返回音频/视频所属的组合（用于连接多个音频/视频元素）muted设置或返回音频/视频是否静音networkState返回音频/视频的当前网络状态paused设置或返回音频/视频是否暂停playbackRate设置或返回音频/视频播放的速度played返回表示音频/视频已播放部分的 TimeRanges 对象prel

13、oad设置或返回音频/视频是否应该在页面加载后进行加载readyState返回音频/视频当前的就绪状态seekable返回表示音频/视频可寻址部分的 TimeRanges 对象seeking返回用户是否正在音频/视频中进行查找src设置或返回音频/视频元素的当前来源startDate返回表示当前时间偏移的 Date 对象textTracks返回表示可用文本轨道的 TextTrackList 对象videoTracks返回表示可用视频轨道的 VideoTrackList 对象volume设置或返回音频/视频的音量表 8-5HTML5 Audio/Video 事件事件描述abort当音频/视频的加

14、载已放弃时canplay当浏览器可以播放音频/视频时canplaythrough当浏览器可在不因缓冲而停顿的情况下进行播放时durationchange当音频/视频的时长已更改时emptIEd当目前的播放列表为空时ended当目前的播放列表已结束时error当在音频/视频加载期间发生错误时loadeddata当浏览器已加载音频/视频的当前帧时loadedmetadata当浏览器已加载音频/视频的元数据时loadstart当浏览器开始查找音频/视频时pause当音频/视频已暂停时play当音频/视频已开始或不再暂停时playing当音频/视频在已因缓冲而暂停或停止后已就绪时progress当浏览

15、器正在下载音频/视频时ratechange当音频/视频的播放速度已更改时seeked当用户已移动/跳跃到音频/视频中的新位置时seeking当用户开始移动/跳跃到音频/视频中的新位置时stalled当浏览器尝试获取媒体数据，但数据不可用时suspend当浏览器刻意不获取媒体数据时timeupdate当目前的播放位置已更改时volumechange当音量已更改时waiting当视频由于需要缓冲下一帧而停止表 8-64.播放器实战由于各浏览器在对HTML5的支持上，会有少许的差异，因此为了有更好的兼容性，需要进行定制开发，这样才能更兼顾各类的浏览器。结合本章前三节的知识，利用HTML5多媒体给我们

16、提供的API，实现的自定义视频播放器效果。代码清单：HTML:Video您的浏览器不支持Video，请升级您的浏览器。00:00|00:00Javascript:window.onload=function()/获取视频对象varvObj=document.getElementsByClassName(videos)0.getElementsByTagName(video)0;vObj.controls=false;/隐藏自带控件/获取play按钮varplaybtn=document.getElementsByClassName(play)0;/获取加载图标varload=document.

17、getElementsByClassName(loading)0;/获取进度条varprogress=document.getElementsByClassName(progress)0;varnowProgress=document.getElementsByClassName(now-progress)0;varloadProgress=document.getElementsByClassName(load-progress)0;progress.onmouseover=function()progress.style.height=8px;progress.style.top=-8px

18、;progress.onmouseout=function()progress.style.height=5px;progress.style.top=-5px;/单击窗体单击播放按钮开始播放暂停vObj.onclick=playbtn.onclick=function()if(vObj.paused)vObj.play();elsevObj.pause();/检测播放暂停vObj.onplay=function()/更改播放按钮样式播放状态playbtn.innerHTML=;/视频缓冲vObj.onprogress=function()/console.log(vObj.buffered.

19、end(0);varscale=vObj.buffered.end(0)/vObj.duration;loadProgress.style.width=scale*100+%;vObj.onwaiting=function()load.style.display=block;vObj.onplaying=function()load.style.display=none;vObj.autoplay=true;/暂停事件触发更改播放按钮样式暂停状态vObj.onpause=function()playbtn.innerHTML=;/获取time容器varnowT=document.getElem

20、entsByClassName(now)0;/当前时间容器vardur=document.getElementsByClassName(dur)0;/持续时间容器vObj.onloadedmetadata=function()dur.innerHTML=setTime(vObj.duration);/console.log(vObj.buffered.end(0);varscale=vObj.buffered.end(0)/vObj.duration;loadProgress.style.width=scale*100+%;/播放时间改变修改当前播放时间修改进度条vObj.ontimeupda

21、te=function()nowT.innerHTML=setTime(vObj.currentTime);varscale=vObj.currentTime/vObj.duration;nowProgress.style.width=scale*100+%;/单击进度条跳转到指定时间progress.onclick=function(e)varev=window.event|e;varx=ev.offsetX|ev.layerX;varprogressW=progress.offsetWidth;vObj.currentTime=x/progressW*vObj.duration;progr

22、ess.onmousedown=function(e)varev=window.event|e;varx=ev.offsetX|ev.layerX;varprogressW=progress.offsetWidth;document.onmousemove=function(e)varev=window.event|e;if(ev.preventDefault)ev.preventDefault();/阻止默认浏览器动作(W3C)elseev.returnValue=false;/IE中阻止函数器默认动作的varx=ev.offsetX|ev.layerX;nowProgress.style.width=x/progressW*100+%;vObj.currentTime=x/progressW*vObj.duration;document.onmouse