HTML5+CSS3网页设计与制作课件：添加宣传视频.pptx

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清单网页添加宣传视频。任务目标添加宣传视频

本次任务要求在D清单网页中添加宣传视频。完成后的效果图如图1-9所示。任务描述图1-9添加宣传视频后的网页效果图添加宣传视频

要完成D清单网页多媒体的嵌入，需要：学习HTML5视频和音频格式和嵌入；分析D清单页面中的多媒体，正确使用语义化标签完成D清单网页内容制作。D清单网页多媒体分析如图1-9-1所示。任务分析图1-9-1D清单网页多媒体分析图添加宣传视频

知识与技能准备（1）视频的格式视频格式包含视频编码、音频编码和容器格式。目前，HTML5支持三种视频格式，分别是Ogg格式、MPEG4格式、WebM格式。三种格式具体情况如下：Ogg：带有Theora视频编码和Vorbis音频编码的Ogg文件MPEG4：带有H.264视频编码和AAC音频编码的MPEG4文件WebM：带有VP8视频编码和Vorbis音频编码的WebM文件（2）支持视频的浏览器到目前为止，很多主流浏览器已经实现了对HTML5视频格式的支持，主流的五大浏览器IE、Firefox、Chrome、Opera、Safari对三种视频格式的支持情况如表1-9-1所示。1、web上的视频

知识与技能准备（2）支持视频的浏览器格式IEFirefoxOperaChromeSafariOggNo3.5+10.5+5.0+NoMPEG49.0+NoNo5.0+3.0+WebMNo4.0+10.6+6.0+No表1-3-1常见的短语元素

知识与技能准备（2）支持视频的浏览器图1-9-2Chrome浏览器视频界面表1-9-1列举了各主流浏览器对三种视频格式的支持情况，但在不同浏览器上，显示的视频效果是略有不同的，这是因为不同浏览器对内置视频控件样式的定义不同，从而导致了播放控件的显示样式不同。如图1-9-2和图1-9-3所示效果。图1-9-3Firefox浏览器视频界面

知识与技能准备（3）嵌入视频在HTML5中，标签video用于定义视频的标准，它支持Ogg格式、MPEG4格式、WebM格式，其基本语法格式如下：videosrc=”视频文件的路径”/video

要求：在HTML5中插入视频women.mp4，设置该视频加载完毕后自动播放，重复播放，显示播放控件。打开index.html，在body/body中输入以下代码：课堂练习1-9-1嵌入视频123videosrc=women.mp4autoplaycontrols=controlsloop=loop你的浏览器不支持该视频格式!/video显示效果如图1-9-4所示（以Chrome浏览器进行播放）。图1-9-4嵌入视频

知识与技能准备（4）video属性（1）autoplay属性autoplay表示当页面加载完成后自动播放，取值同样为autoplay。其语法格式如下：videosrc=视频文件的地址autoplay=”autoplay”（2）loop属性loop是视频结束时重新开始播放，即循环播放，取值同样为loop。其语法格式如下：videosrc=视频文件的地址loop=”loop”（3）preload属性preload是一个比较特殊的属性，该属性和autoplay