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

多媒体—自定义炫酷播放器 本章节要向读者介绍video元素及Audio元素，以及它所支持的不同的视频、音频类型。 1. HTML5对多媒体的支持 在Web中不仅只有文本、图片,在HTML5标准发布之前，我们如果需要播放音频、视频需要借助诸如Flash Player等第三方插件来解决这个问题。后来HTML5标准发布之后，用HTML5标记在网页中添加视频、音频如同引用图片一样的简单、方便。 1. Video支持视频格式 视频编码和解码 视频编码 所谓视频编码方式就是指通过特定的压缩技术，将某个视频格式的文件转换成另一种视频格式文件的方式。 视频解码 用特定方法把已经编码的视频还原成它原有的格式，进行播放 编码说明 Theora 视频编码，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 元素支持三种视频格式： 说明Ogg带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件MPEG4带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件WebM带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件表 8-1 图 8-1 2. Audio支持音频格式 当前，Audio元素支持三种音频格式： MP3, Wav, 和 Ogg。 图 8-2 3. Audio/Video 浏览器支持情况 Audio元素浏览器支持情况 图 8-3 Video元素浏览器支持情况 图8-4 2.音频和视频标签 HTML5 让我们可以如同引入图片一样简单的，去引入声音、视频。 1. Audio元素 HTML5 规定了一种通过 audio 元素来包含音频的标准方法。audio 元素能够播放声音文件或者音频流。 页面添加音频 audio src=audio.mp3 controls=controls/audio 提示：可以在开始标签和结束标签之间放置文本内容，这样旧的浏览器就可以显示出不支持该标签的信息。 浏览器全支持 我们说过浏览器对于音频格式支持情况，要让所有浏览器都可以播放音频文件，我们需要给audio引用至少2个指定格式的音频文件。我们可以通过 source链接不同的音频文件，这样我们可以做到只要它支持audio标签。浏览器将使用第一个可识别的格式。 audio controls source src=audio.ogg type=audio/ogg source src=audio.mp3 type=audio/mpeg 您的浏览器不支持 audio，请升级浏览器。 /audio audio 标签的属性 属性值描述autoplayautoplay标签添加上此属性，音频在就绪后马上播放。controlscontrols标签添加上此属性，??则向用户显示控件，比如播放按钮。looploop标签添加上此属性，??则每当音频结束时重新开始播放。preloadpreload标签添加上此属性，??则音频在页面加载时进行加载，并预备播放。如果使用 autoplay，则忽略该属性。srcurl添加要播放的音频的 URL。表 8-2 2. Video元素 HTML5 规定了一种通过 video 元素来包含视频的标准方法。 页面添加视频 video src=move.mp4 controls=controls 您的浏览器不支持video，请升级浏览器。/video 提示：可以在开始标签和结束标签之间放置文本内容，这样旧的浏览器就可以显示出不支持该标签的信息。 浏览器全支持 我们说过浏览器对于视频格式支持情况，要让所有浏览器都可以播放视频文件，我们需要给video引用至少2个指定格式的视频文件。我们可以通过 source链接不同的视频文件，这样我们可以做到只要它支持video标签。浏览器将使用第一个可识别的格式。 video controls=controls scurce src=move.ogg/scurce scurce src=move.mp4/scurce 您的浏览器不支持video，请升级浏览器。/video video 标签的属性 属性值