《HTML5+CSS3网站设计基础教程（第3版）》ppt第8章 多媒体嵌入

第8章多媒体嵌入《HTML5+CSS3网站设计基础教程（第3版）》学习目标/Target掌握HTML5中视频的嵌入方法，能够在HTML5页面中添加视频文件。掌握HTML5中音频的嵌入方法，能够在HTML5页面中添加音频文件。了解常用的视频文件格式和音频文件格式，能够归纳HTML5支持的视频和音频格式。了解视频、音频嵌入技术，能够总结HTML5视频、音频嵌入技术的优点。学习目标/Target熟悉CSS控制视频宽度和高度的方法，能够在网页中设置视频宽度和高度。熟悉调用网络音频、视频文件的方法，能够调用网络中的音频、视频文件。了解HTML5中视频、音频的兼容性，能够制作视频、音频兼容性较好的网页。章节概述/Summary在网页设计中，多媒体技术主要是指在网页上运用音频、视频传递信息的一种方式。在网络传输速度越来越快的今天，视频和音频技术已经被越来越广泛的应用在网页设计中，比起静态的图片和文字，音频和视频可以为用户提供更直观、丰富的信息。本章将对HTML5多媒体的特性以及嵌入音频和视频的方法进行详细讲解。目录/Contents8.3嵌入视频和音频8.2HTML5支持的视频格式和音频格式8.1视频、音频嵌入技术概述8.4使用CSS控制视频的宽度和高度8.5阶段案例—音乐播放界面视频、音频嵌入技术概述8.1了解视频、音频嵌入技术，能够总结HTML5视频、音频嵌入技术的优点。学习目标8.1.1视频、音频嵌入技术概述8.1视频、音频嵌入技术概述在HTML5出现之前并没有将视频和音频嵌入到页面的标准方式，多媒体内容在大多数情况下都是通过第三方插件或集成在Web浏览器的应用程序置于页面中。8.1视频、音频嵌入技术概述8.1.1视频、音频嵌入技术概述复杂冗长8.1视频、音频嵌入技术概述8.1.1视频、音频嵌入技术概述8.1视频、音频嵌入技术概述运用HTML5中新增的<video>标签和<audio>标签来嵌入视频或音频。简单精炼8.1.1视频、音频嵌入技术概述8.1视频、音频嵌入技术概述浏览器对<video>标签和<audio>标签的支持情况浏览器支持版本IE浏览器9.0及以上版本Firefox（火狐浏览器）3.5及以上版本Opear（欧朋浏览器）10.5及以上版本Chrome（谷歌浏览器）3.0及以上版本Safari（苹果浏览器）3.1及以上版本Edge浏览器12.0及以上版本8.1.1视频、音频嵌入技术概述8.1视频、音频嵌入技术概述在不同的浏览器上运用<video>或<audio>标签时，浏览器显示音频、视频界面样式也略有不同。Firefox浏览器（99.0.1版本）Chrome浏览器（100.0版本）8.1.1视频、音频嵌入技术概述HTML5支持的视频格式和音频格式8.2了解常用的视频文件格式和音频文件格式，能够归纳HTML5支持的视频和音频格式。学习目标8.2HTML5支持的视频格式和音频格式8.2HTML5支持的视频格式和音频格式视频格式oggmp4Webm音频格式oggmp3wav8.2HTML5支持的视频格式和音频格式嵌入视频和音频8.38.3嵌入视频和音频通过上一节的学习，相信读者对HTML5中视频和音频的相关知识有了初步了解。接下来，本节将进一步讲解视频和音频的嵌入方法，使读者能够熟练运用<video>标签和<audio>标签在网页中嵌入视频和音频文件。掌握HTML5中视频的嵌入方法，能够在HTML5页面中添加视频文件。学习目标8.3嵌入视频和音频8.3.1在HTML5中嵌入视频8.3嵌入视频和音频8.3.1在HTML5中嵌入视频在HTML5中，<video>标签用于定义视频文件。使用<video>标签嵌入视频的基本语法格式<videosrc="视频文件路径"controls="controls"></video>src用于设置视频文件的路径controls用于控制是否显示播放控件<video>标签之间可插入文字，浏览器不支持<video>标签时，会显示插入的文字。8.3嵌入视频和音频8.3.1在HTML5中嵌入视频案例演示8.3嵌入视频和音频8.3.1在HTML5中嵌入视频<video>标签常见属性在<video>标签中还可以添加其他属性，进一步优化视频的播放效果。属性属性值描述autoplayautoplay当页面载入完成后自动播放视频looploop视频结束时重新开始播放preloadauto/meta/none如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用"autoplay"，则忽略该属性posterurl当视频缓冲不足时，该属性值链接一个图像，并将该图像按照一定的比例显示出来8.3嵌入视频和音频8.3.1在HTML5中嵌入视频在2018年1月chrome浏览器取消了对自动播放功能的支持，也就是说autoplay属性是无效的，这时如果我们想要自动播放视频，就需要为<video>标签添加“muted”属性，嵌入的视频就会静音播放。掌握HTML5中音频的嵌入方法，能够在HTML5页面中添加音频文件。学习目标8.3嵌入视频和音频8.3.2在HTML5中嵌入音频8.3嵌入视频和音频在HTML5中，<audio>标签用于定义音频文件。使用<audio>标签嵌入音频文件的基本语法格式<audiosrc="音频文件路径"controls></audio>src用于设置音频文件的路径controls用于为音频提供播放控件<audio>标签之间可插入文字，浏览器不支持<audio>标签时，会显示插入的文字。8.3.2在HTML5中嵌入音频8.3嵌入视频和音频案例演示8.3.2在HTML5中嵌入音频8.3嵌入视频和音频<audio>标签常见属性在<audio>标签中还可以添加其他属性，来进一步优化音频的播放效果。8.3.2在HTML5中嵌入音频属性值描述autoplayautoplay当页面载入完成后自动播放音频looploop音频结束时重新开始播放preloadauto/meta/none如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用autoplay属性，浏览器会忽略preload属性了解HTML5中视频、音频的兼容性，能够制作视频、音频兼容性较好的网页。学习目标8.3嵌入视频和音频8.3.3视频、音频文件的兼容性问题8.3嵌入视频和音频8.3.3视频、音频文件的兼容性问题为什么在前途视频和音频时需要考虑浏览器的兼容性问题？8.3嵌入视频和音频8.3.3视频、音频文件的兼容性问题答案:虽然HTML5支持ogg、mp4和Webm

的视频格式以及ogg、mp3和wav的音频格式，但并不是所有的浏览器都支持这些格式，因此我们在嵌入视频、音频文件格式时，就要考虑浏览器的兼容性问题。8.3嵌入视频和音频8.3.3视频、音频文件的兼容性问题浏览器支持的视频、音频格式视频格式

IE9以上Firefox4以上Opera11.5以上Chrome8以上Safari12.1以上Edge17以上ogg×支持支持支持×支持mpeg4支持支持支持支持支持支持WebM×支持支持支持支持支持音频格式ogg×支持支持支持×支持mp3支持支持支持支持支持支持wav×支持支持支持支持支持8.3嵌入视频和音频8.3.3视频、音频文件的兼容性问题运用<source>标签添加音频的基本语法格式在HTML5中，运用<source>标签可以为<video>标签或<audio>标签提供多个备用文件。<audiocontrols="controls"> <sourcesrc="音频文件地址"type="媒体文件类型/格式"> <sourcesrc="音频文件地址"type="媒体文件类型/格式"> ……</audio>8.3嵌入视频和音频8.3.3视频、音频文件的兼容性问题<source>标签的属性src：用于指定媒体文件的URL地址。type：指定媒体文件的类型和格式。如果嵌入音频文件，则类型设置为audio；如果嵌入视频文件，则类型设置为video。格式设置为HTML5所支持的音频、视频格式。8.3嵌入视频和音频8.3.3视频、音频文件的兼容性问题运用<source>标签添加视频的基本语法格式<videocontrols="controls"> <sourcesrc="视频文件地址"type="媒体文件类型/格式"> <sourcesrc="视频文件地址"type="媒体文件类型/格式"> ……</video>8.3嵌入视频和音频8.3.3视频、音频文件的兼容性问题浏览器对视频和音频的编码格式也有要求。其中，视频编码格式最好为H.264，音频编码格式最好为AAC。关于封装格式和编码格式这里只需了解即可。熟悉调用网络音频、视频文件的方法，能够调用网络中的音频、视频文件。学习目标8.3嵌入视频和音频8.3.4调用网络音频、视频文件8.3嵌入视频和音频8.3.4调用网络音频、视频文件请写下调用本地音、视频文件的示例代码8.3嵌入视频和音频8.3.4调用网络音频、视频文件<audiosrc="music/1.mp3"controls="controls">浏览器不支持audio标签</audio>8.3嵌入视频和音频8.3.4调用网络音频、视频文件如果此时可以直接调用网络中的音、视频，路径应该替换为什么？想一想：8.3嵌入视频和音频8.3.4调用网络音频、视频文件src="/plug/down/up2.php/3589123.mp3"音、视频文件的URL如何获取某个音频、视频文件的URL呢？8.3嵌入视频和音频8.3.4调用网络音频、视频文件8.3嵌入视频和音频8.3.4调用网络音频、视频文件步骤一获取文件的URL：在网页中获取音频或视频的外部链接地址。8.3嵌入视频和音频8.3.4调用网络音频、视频文件步骤二插入文件URL：选中外部链接地址并复制，粘贴到代码中。8.3嵌入视频和音频调用网络音频、视频文件的方法虽然简单易用，但是当链入的音频、视频文件所在的网站出现问题时，我们调用的URL地址也会失效。8.3.4调用网络音频、视频文件注意：在网页中嵌入音频或视频文件时，一定要注意版权问题，我们尽量选择一些授权使用的音频或视频文件。8.3嵌入视频和音频8.3.4调用网络音频、视频文件使用CSS控制视频的宽度和高度8.48.4使用CSS控制视频的宽度和高度熟悉CSS控制视频宽度和高度的方法，能够在网页中设置视频宽度和高度。学习目标8.4使用CSS控制视频的宽度和高度为什么要控制视频的宽高？原因：给视频设置宽度和高度属性后，浏览器在加载页面时就会预先确定视频的尺寸，为视频保留合适大小的空间，保证页面布局的统一。8.4使用CSS控制视频的宽度和高度8.4使用CSS控制视频的宽度和高度案例演示运用width属性和height属性直接为<video>标签设置宽度和高度。8.4使用CSS控制视频的宽度和高度注意：通过width属性和height属性来缩放视频，这样的视频即使在页面上看起来很小，但它的原始大小依然没变，因此在实际工作中要运用视频处理软件（如“格式工厂”）对视频进行压缩。阶段案例——音乐播放界面8.5本章前几节重点讲解了多媒体的格式、浏览器对HTML5音频、视频的支持情况以及在HTML5页面中嵌入音频、视频文件的方法。为了加深读者对网页多媒体标签的理解和运用，本节将通过案例的形式分步骤制作一个音乐播放界面。8.5阶段案例——音乐播放界面音乐播放界面效果图8.5