第6章 使用HTML5在网页中嵌入视频和音频课件.ppt

《第6章 使用HTML5在网页中嵌入视频和音频课件.ppt》由会员分享，可在线阅读，更多相关《第6章 使用HTML5在网页中嵌入视频和音频课件.ppt（7页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、网页中嵌入音频和视频是越来越常见了，也使网页内容也越来越精彩。通过标签可以将音频嵌入网页中，还可以插入许多不同格式的视频文件。标签在HTML 4.01中就已经存在，在HTML 5中依然支持该标签。使用使用标签嵌入音频标签嵌入音频将音频文件嵌入到网页中，在网页中嵌入音频可以在网页上显示播放器的外观，包括播放、暂停、停止、音量及声音文件的开始和结束等控制按钮。使用标签即可在网页中嵌入音频文件。实战练习实战练习在网页中嵌入音频在网页中嵌入音频使用使用标签嵌入视频标签嵌入视频在网页中可以插入许多普通格式的视频文件，例如WMV和AVI等格式的视频文件。在网页中插入视频可以在网页上显示播放器外观，包括播放

2、、暂停、停止和音量等控制按钮。 实战练习实战练习在网页中嵌入视频在网页中嵌入视频最终文件：光盘最终文件第6章6-1-1.html视频：光盘视频第6章6-1-1.swf最终文件：光盘最终文件第6章6-1-2.html视频：光盘视频第6章6-1-2.swf在线多媒体的发展在线多媒体的发展在HTML 5之前，要在网页中添加音频和视频，最简单、最直接的方法就是使用Flash。这种实现方式的缺点是代码较长，最重要的是需要安装Flash插件，并非所有浏览器都拥有同样的插件。在HTML 5中，不但不需要安装其他插件，而且实现还很简单。插放一个视频只需要一行代码。音频和视频编解码器音频和视频编解码器编解码器是

3、一个算法代码，用来处理视频、音频或者其元素数据的编码格式。对音频或视频文件进行编码，可使得文件大大缩小，方便在因特网上传输，因为在网络多媒体发展方面，网络宽带是一个很大的瓶颈 。功能缺陷及未来趋势器功能缺陷及未来趋势器直到现在，仍然不存在完整的音频和视频标准。尽管HTML 5提供了音频和视频的规范，但其中所涉及的内容还不够完善。HTML 5对多媒体的支持是顺势发展，只是目前还没有规范得很完整，各种浏览器的支持，差别也很大，如何深入理解HTML 5的多媒体内容，有必要对其相关的多媒体技术有一定的了解。标签所支持的音频格标签所支持的音频格式式目前，HTML 5新增的Audio元素所支持的音频格式主

4、要是MP3、Wav和Ogg。使用使用标签标签在HTML 5中新增了标签，通过该标签可以在网页中嵌入音频并播放。在网页中使用HTML5中的标签嵌入音频时，只需要指定标签中的src属性值为一个音频源文件的路径就可以了。实战练习实战练习在网页中嵌入音频播在网页中嵌入音频播放放网络上有许多不同格式的音频文件，但HTML标签所支持的音乐格式并不是很多，并且不同的浏览器支持的格式也不相同。HTML 5针对这种情况，新增了标签来统一网页音频格式，可以直接使用该标签在网页中添加相应格式的音乐。最终文件：光盘最终文件第6章6-3-2.html视频：光盘视频第6章6-3-2.swf标签所支持的音频格式标签所支持的

5、音频格式目前，HTML 5新增的Video元素所支持的视频格式主要是MPEG4、WebM和Ogg。使用使用标签标签在网页中可以使用HTML 5新增的Video元素嵌入视频，其方法与Audio元素相似，还可以在标签中添加width和height属性设置，从而控制视频的宽度和高度。实战练习实战练习在网页中嵌入视频播在网页中嵌入视频播放放视频标签的出现无疑是HTML 5的一大亮点，但是旧的浏览器不支持HTML 5 Video，并且，涉及到视频文件的格式问题，Firefox、Safari和Chrome的支持方式并不相同，所以，在现阶段要想使用HTML 5的视频功能，浏览器兼容性是一个不得不考虑的问题。

6、最终文件：光盘最终文件第6章6-4-2.html视频：光盘视频第6章6-4-2.swf使用使用标签标签由于各种浏览器对音频和视频的编解码器的支持不一样，为了能够在各种浏览器中都能正常显示音频和视频效果，可以提供多种不同格式的音频和视频文件。这就需要使用标签为audio元素或video元素提供多个备用多媒体文件。检查浏览器是否支持检查浏览器是否支持audio和和video元素元素可以使用脚本代码来判断浏览器是否支持audio元素或者video元素。可以使用脚本代码动态地创建它，并检测是否存在，脚本代码如下。var support = !document.createElement(“audio”

7、).canPlayType;在HTML 5新增的与标签中都提供了相应的属性，通过在标签中添加相应的属性设置，可以对页面中的音频和视频进行设置。在与标签中所提供的属性可以大致分为标签属性（attributes）和接口属性（properties）。元素的标签属性元素的标签属性与标签所提供的元素标签属性基本相同，主要用于为网页标签。元素的接口属性元素的接口属性与标签除了提供了标签属性外，还提供了一些接口属性，用于针音频和视频文件的编程。实战练习实战练习实现视频的快进实现视频的快进最终文件：光盘最终文件第6章6-5-2.html视频：光盘视频第6章6-5-2.swfHTML 5为audio与video

8、元素还提供了接口方法和一系列接口事件，方便通过脚本代码对嵌入到网页中的音频和视频进行控制，本节将向读者介绍audio和video元素的接口方法和接口事件。 与与标签标签的接口方法的接口方法实战练习实战练习控制视频的播控制视频的播放和暂停放和暂停最终文件：光盘最终文件第6章6-6-1.html视频：光盘视频第6章6-6-1.swf 与与标签的事标签的事件件在使用audio和video元素读取或播放媒体文件的时候，会触发一系列的事件，可以用JavaScript脚本来捕获这些事件，并进行相应的处理。捕获事件有两种方法：一种是添加事件句柄；一种是监听。实战练习实战练习自定义视频播放控自定义视频播放控制组件制组件最终文件：光盘最终文件第6章6-6-2.html视频：光盘视频第6章6-6-2.swf本章主要讲解了HTML 5的音频和视频在互联网方面的发展，以及接口中的属性、方法和事件。重点介绍了音频和视频的基础知识，还有HTML 5提供的音频和视频的接口及如何使用这些接口。其中音频和视频都包含两类属性，容易混淆，所以读者一定要特别注意，认真地阅读本章，准确的理解和掌握使用HTML 5在网页中嵌入视频和音频的方法和技巧。