1.9添加宣传视频（课件）-高二《网页设计与制作》同步教学（劳动版）

制作网页内容 第一阶段 能够表述video元素支持的三种视频格式及支持的浏览器 能够利用video元素在HTML5中添加并显示视频 能够表述audio元素支持的三种音频格式及支持的浏览器 能够利用audio元素在HTML5中添加并播放音频 能够应用video元素为D清单网页添加宣传视频。 任务目标 任务9 添加宣传视频 本次任务要求在D清单网页中添加宣传视频。完成后的效果图如图1-9所示。 任务描述 图1-9 添加宣传视频后的网页效果图 任务9 添加宣传视频 要完成D清单网页多媒体的嵌入，需要： 学习HTML5视频和音频格式和嵌入； 分析D清单页面中的多媒体，正确使用语义化标签完成D清单网页内容制作。 D清单网页多媒体分析如图1-9-1所示。 任务分析 图1-9-1 D清单网页多媒体分析图 任务9 添加宣传视频 知识与技能准备 （1）视频的格式 视频格式包含视频编码、音频编码和容器格式。目前，HTML5支持三种视频格式，分别是Ogg格式、MPEG4格式、WebM格式。三种格式具体情况如下： Ogg ：带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件 MPEG4 ：带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件 WebM ：带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件 （2）支持视频的浏览器 到目前为止，很多主流浏览器已经实现了对HTML5视频格式的支持，主流的五大浏览器IE、Firefox、Chrome、Opera、Safari对三种视频格式的支持情况如表1-9-1所示。 1、web上的视频 知识与技能准备 （2）支持视频的浏览器 格式 IE Firefox Opera Chrome Safari Ogg No 3.5+ 10.5+ 5.0+ No MPEG 4 9.0+ No No 5.0+ 3.0+ WebM No 4.0+ 10.6+ 6.0+ No 表1-3-1常见的短语元素 知识与技能准备 （2）支持视频的浏览器 图1-9-2 Chrome浏览器视频界面 表1-9-1列举了各主流浏览器对三种视频格式的支持情况，但在不同浏览器上，显示的视频效果是略有不同的，这是因为不同浏览器对内置视频控件样式的定义不同，从而导致了播放控件的显示样式不同。如图1-9-2和图1-9-3所示效果。 图1-9-3 Firefox浏览器视频界面 知识与技能准备 （3）嵌入视频 在HTML5中，标签<video>用于定义视频的标准，它支持Ogg格式、MPEG4格式、WebM格式，其基本语法格式如下： <video src=”视频文件的路径”></video> 要求：在HTML5中插入视频women.mp4，设置该视频加载完毕后自动播放，重复播放，显示播放控件。打开index.html，在<body></body>中输入以下代码： 课堂练习1-9-1 嵌入视频 1 2 3 <video src="women.mp4" autoplay controls="controls" loop="loop"> 你的浏览器不支持该视频格式! </video> 显示效果如图1-9-4所示（以Chrome浏览器进行播放）。 图1-9-4 嵌入视频 知识与技能准备 （4）video属性 （1）autoplay属性 autoplay表示当页面加载完成后自动播放，取值同样为autoplay。 其语法格式如下：<video src="视频文件的地址" autoplay=”autoplay”> （2） loop属性 loop是视频结束时重新开始播放，即循环播放，取值同样为loop。 （3）preload属性 preload是一个比较特殊的属性，该属性和autoplay属性冲突。preload属性表示视频在网页页面加载的过程中也进行加载，并预备播放。但如果autoplay属性同时存在，系统会将preload属性自动忽略。 （4）controls属性 controls用于显示播放控件，如按钮等。 其语法格式如下：<video src="视频文件的地址" controls=”controls”> （5）width和height属性 width和height用于设置视频播放器的宽度和高度。 其语法格式如下：<video src="视频文件的地址" loop=”loop”> 其语法格式如下：<video src="视频文件的地址" preload=”preload”> 知识与技能准备 （1）音频的格式 网页上的音频主要是播放音频文件。目前，HTML5支持三种音频格式，分别是Ogg Vorbis格式、MP3格式、Wav格式。三种格式具体情况如下： Ogg Vorbis：是一种免费、开源的音频编码，用来