项目一 第一阶段 任务9 添加宣传视频-【鹑首文化】HTML5+CSS3网页设计与制作配套电子课件PPT

HTML5+CSS3网页设计与制作 使用HTML5+CSS3制作响应式网页 项目一 项目将通过“制作一个D清单网页广告单页”项目，即通过制作一个HTML页面来承载网页制作知识，完成网页开发环境搭建、HTML5标签、CSS3叠层样式和响应式布局等的学习。 项目目标 D清单是某公司推出的一款跨平台同步的待办事项和任务提醒软件, 旨在协助您完成待办事务比如生日提醒, 旅行安排, 会议准备等以便更好的进行时间和事项管理。 为了方便D清单应用的推广，其公司需要制作一个该应用产品的介绍网页。该页面主要用于手机端进行分享推广，同时也要求能够在电脑端进行访问。 前端工程师小王所在的科技公司已经拿到了设计稿，如图1所示。主管希望他担任本次项目的前端工作，开发完成后将成果交付给程序员完成逻辑制作、测试和发布。 项目情境 图1-1-1 项目移动端和电脑端页面截图 网页制作的一般流程如下： 项目分析 项目发布 需求分析 规划设计 实施 测试 交付 根据“移动优先”原则，我们需要制定项目完成的计划： 项目分析 时间段1 时间段2 时间段3 时间段4 时间段5 分析规划 实施 阶段1 移动端内容制作 阶段2 移动端格式制作 阶段3 响应式制作 测试与交付 D清单前端开发甘特图 时间 进度 任务 制作网页内容 第一阶段 能够表述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。