第9章多媒体嵌入《HTML5+CSS3网页设计与制作（第2版）》
学习目标/Target掌握在HTML5中嵌入音频的方法，能够在页面中添加音频文件了解常用的视频和音频文件格式，能够归纳HTML5支持的视频和音频格式了解视频、音频嵌入技术掌握在HTML5中嵌入视频的方法，能够在页面中添加视频文件
学习目标/Target熟悉调用网络音频、视频文件的方法，能够调用互联网中的音频、视频文件了解HTML5中视频、音频的兼容问题，能够制作对视频、音频兼容性较好的网页熟悉使用CSS控制视频宽度和高度的方法，能够设置视频在网页中的宽度和高度
章节概述/Summary在网页设计中，多媒体技术指的是利用视频和音频在网页中传递信息的技术。随着网络传输速度的不断提升，视频和音频技术在网页设计中的应用越来越广泛。与静态的图像和文字相比，视频和音频能够提供更直观、更丰富的信息体验。本章将介绍多媒体嵌入技术以及如何嵌入视频和音频文件等。
目录/Contents010203多媒体嵌入技术概述视频和音频文件的格式嵌入视频和音频04用CSS控制视频的宽度和高度05阶段案例——制作音乐播放页面
多媒体嵌入技术概述9.1
9.1多媒体嵌入技术概述在全新的视频、音频标签出现之前，W3C并没有提供将视频和音频嵌入页面的标准方式，音频、视频内容在大多数情况下都是通过第三方插件或浏览器的应用程序嵌入页面中的。复杂冗长运用HTML5中新增的video标签和audio标签可以避免这样的问题。
目前绝大多数浏览器都已经支持HTML5中的video和audio标签。浏览器支持版本IE浏览器9.0及以上版本Firefox浏览器3.5及以上版本Opera浏览器10.5及以上版本Chrome浏览器3.0及以上版本Safari浏览器3.1及以上版本Edge浏览器12.0及以上版本9.1多媒体嵌入技术概述
9.1多媒体嵌入技术概述在不同的浏览器上使用video标签或audio标签时，浏览器显示视频或音频的界面样式也略有不同。Firefox浏览器中显示的样式Chrome浏览器中显示的样式
视频和音频文件的格式9.2
9.2视频和音频文件的格式视频格式OggMPEG4WebM
9.2视频和音频文件的格式音频格式OggMP3WAV
嵌入视频和音频9.3
9.3.1在HTML5中嵌入视频基本语法格式videosrc=视频文件路径controls=controls/video属性值描述autoplayautoplay（可以省略）设置页面载入完成后自动播放视频looploop（可以省略）设置视频播放结束后重新开始播放（循环播放）preloadauto/metadata/none设置是否在加载页面时加载视频。auto表示加载全部视频文件；metadata表示只加载视频元数据；none表示不加载，为默认值。如果使用autoplay属性，则会忽略preload属性的作用posterurl设置一个图像，在视频加载完成前，会将该图像按照一定比例显示出来
9.3.1在HTML5中嵌入视频自2018年1月起，Chrome浏览器修改了支持自动播放功能的规则，只允许在静音模式下自动播放视频。为了实现在Chrome浏览器中自动播放视频的功能，可以在video标签中添加muted属性，使嵌入的视频保持静音状态并自动播放。
9.3.2在HTML5中嵌入音频在HTML5中，audio标签用于定义音频文件。基本语法格式audiosrc=音频文件路径controls=controls/audio属性值描述autoplayautoplay（可以省略）设置页面载入完成后自动播放音频looploop（可以省略）设置音频播放结束后重新开始播放preloadauto/metadata/none设置是否在加载页面时加载音频
9.3.3视频、音频文件的兼容性问题虽然HTML5支持Ogg、MP4和WebM格式的视频文件以及Ogg、MP3和WAV格式的音频文件，但并不是所有浏览器都支持这些格式。文件格式IE9及以上版本Firefox108及以上版本Opera30及以上版本Chrome43及以上版本Safari3.2及以上版本Edge79及以上版本Ogg×支持支持支持×支持MP4支持支持支持支持支持支持WebM×支持支持支持×支持文件格式IE9及以上版本Firefox108及以上版本Opera30及以上版本Chrome43及以上版本Safari3.2及以上版本Edge79及以上版本Ogg×支持支持支持×支持MP3支持支持支持支持支持支持WAV×支持支持支持支持支持
9.3.3