单元8-电影音乐网—页面中插入视频、音频、动画《WEB前端开发实用案例教程》.pptx

《单元8-电影音乐网—页面中插入视频、音频、动画《WEB前端开发实用案例教程》.pptx》由会员分享，可在线阅读，更多相关《单元8-电影音乐网—页面中插入视频、音频、动画《WEB前端开发实用案例教程》.pptx（48页珍藏版）》请在三一办公上搜索。

1、WEB前端开发实用案例教程,第八单元 电影音乐网 页面中插入视频、音频、动画,随着多媒体技术的发展，原先单一的图片、文字网页内容发展为多种媒体集合的表现形式。在网页中应用多媒体技术，如视频、音频、Flash动画等内容，可以增强网页的表现效果，使网页更生动，激发访问者兴趣。教学目标：掌握网页视频、音频、动画的标签元素使用 掌握浏览器对视频文件和音频文件、动画的使用 掌握播放控件的正确使用方法,目录页/Contents,01,任务1 微视频网页展播视频播放页面,02,任务2 婉约配乐页面页面中播放音乐,任务3 新春寄语页面页面中插入动画,03,知识储备,01,任务1 微视频网页展播视频播放页面【知

2、识储备】,目前国内外网站提供的视频内容可谓各有千秋。视频播放器是一种用于播放各种视频文件的多媒体播放软件。常见的视频格式有“wmv”、“avi”、“mpg”、“rmvb”等，Flash 视频是一种新的流媒体视频格式，其文件扩展名为“.flv”。Flash视频文件极小、加载速度极快，它的出现有效地解决了视频文件导入Flash后，使导出的SWF文件体积庞大，不能在网络上很好的使用等缺点，使网络观看视频文件成为可能。使用标签来定义视频播放器，实现了包括播放、暂停、进度和音量控制、全屏等功能，更重要的是可以自定义这些功能和控制栏的样式。,任务1 微视频网页展播视频播放页面【知识储备】,视频可以理解为一

3、系列连续的图片，标签的使用方法与标签非常相似，语法是：含义为，src属性用于设置视频文件的路径，也可以为该标签设置with和height的值；controls属性用于为视频提供播放控件，src和controls是标签的基本属性。标签支持3种视频格式，具体是为：1）ogg，带有throra视频和vorbis音频编码的ogg文件。2）mpeg4，带有H.264视频编码和AAC音频编码的mpeg4文件。3）webm，带有VP8视频编码和vorbis音频编码的webm文件。,任务1 微视频网页展播视频播放页面【知识储备】,标签的用于控制视频播放的常用属性，见表8-1标签属性。表8-1 标签属性,任务1

4、 微视频网页展播视频播放页面【知识储备】,因版权原因，浏览器支持相应的视频格式需要向该视频格式的开发者购买使用资格，并不是所有浏览器对所有的视频格式都支持。常用浏览器对视频的支持概括见表8-2常用浏览器与视频文件的支持。表8-2 常用浏览器与视频文件的支持,素材收集,02,创建站点，用Dreamweaver CS制作网页(实例图片文字内容见本章素材文件夹)实例素材：第八单元 viedo效果文件：第八单元“viedo-1.html”,任务实施,03,任务1 微视频网页展播视频播放页面【任务实施】,微视频网页具体制作，我们分为构建HTML结构和设置CSS样式属性两部分来进行。1）构建HTML结构（

5、1）将素材实例文件夹拷贝至创建My Web站点的根目录中。（2）启动Dreamweaver CS，打开“文件”面板，在拷贝的文件夹中创建一个名为“viedo-1.html”的网页文档，并在文档编辑窗口中打开。（3）添加图片。（4）添加视频。（5）添加播放器按钮。（6）使用JavaScript定义了一个控制播放或者暂停的按钮，使用onliclick事件定义方法。,任务1 微视频网页展播视频播放页面【任务实施】,您的浏览器不支持video标签 播放,快进5秒快退5秒音量+音量-静音,代码如下：,（7）保存文件。按Ctrl+S组合键保存网页，然后按F12键在浏览器中预览效果，此页面完成。,任务1 微

6、视频网页展播视频播放页面【任务实施】,button display:inline-block;/*强制转换为行内块元素*/outline:none;/*该元素获得焦点时，不出现虚线框（或高亮框）*/cursor:pointer;/*鼠标悬停时变为“小手”*/text-align:center;text-decoration:none;/*字体样式：字体大小14px/行高100%字体名称*/,2）构建CSS样式（1）设置CSS样式属性整体页面中文字元素代码，使用外部样式表。内容代码如下：,代码内容 1,任务1 微视频网页展播视频播放页面【任务实施】,font:14px/100%Arial,Hel

7、vetica,sans-serif;padding:0.5em 2em 0.55em;/*顶部内边距0.5em、左右内边距2em、底部内边距0.55em*/text-shadow:0 1px 1px rgba(0,0,0,0.3);/*文本阴影*/-webkit-border-radius:0.5em;-moz-border-radius:0.5em;border-radius:0.5em;/*边框圆角*/background-color:#944bc8;color:white;,代码内容 2,任务1 微视频网页展播视频播放页面【任务实施】,button:hover/*设置所有按钮鼠标悬停效果

8、*/text-decoration:none;/*清除文本样式*/#vd margin:0 auto;background-image:url(./images/a.png);width:700px;height:450px;padding-top:120px;padding-left:40px;,代码内容 3,任务1 微视频网页展播视频播放页面【任务实施】,（2）保存文件。按Ctrl+S组合键保存网页，然后按F12键在浏览器中预览效果，此页面完成。如图8-1所示的预览效果页面。,图8-1 预览效果页面,知识归纳,04,任务1 微视频网页展播视频播放页面【知识归纳】,媒体文件类型video是代

9、表视频，在video标签中添加controls属性，用于设置或返回浏览器应当显示标准的音频空间。单击播放按钮，视频开始播放。如图8-2所示的视频开始播放效果。,图8-2 视频开始播放效果,目录页/Contents,01,任务1 微视频网页展播视频播放页面,02,任务2 婉约配乐页面页面中播放音乐,任务3 新春寄语页面页面中插入动画,03,知识储备,01,任务 2 婉约配乐页面页面中播放音乐【知识储备】,在网页中添加声音有两种方式，一种是以插入音频的形式，通过播放器控制音频；另一种是以添加背景音乐的形式，在加载页面时自动播放音频。1.插入背景音乐，使用元素，只适用于 ie，基本语法是:属性说明

10、src=url音乐路径，表示设定 midi 档案及路径，可以是相对或绝对。属性说明 autostart=true，表示是否在音乐档下载完之后就自动播放。true 是，false 否(内定值)。属性说明loop=infinite，表示是否自动反复播放。loop=2 表示重复两次，infinite 表示重复多次。,任务 2 婉约配乐页面页面中播放音乐【知识储备】,2.插入音频，使用元素标签。用来插入各种多媒体，格式可以是 midi、wav、aiff、au 等等，netscape 及新版的IE都支持。其参数设定如下，基本语法是:属性设置说明:1）自动播放：语法：autostart=true、fals

11、e说明：该属性规定音频或视频文件是否在下载完之后就自动播放。true：音乐文件在下载完之后自动播放；false：音乐文件在下载完之后不自动播放。示例：,任务 2 婉约配乐页面页面中播放音乐【知识储备】,2）循环播放：语法：loop=正整数、true、false说明：该属性规定音频或视频文件是否循环及循环次数。属性值为正整数值时，音频或视频文件的循环次数与正整数值相同；属性值为true时，音频或视频文件循环；属性值为false时，音频或视频文件不循环。示例：,任务 2 婉约配乐页面页面中播放音乐【知识储备】,3）面板显示：语法：hidden=ture、flase说明：该属性规定控制面板是否显示，

12、默认值为flase。ture：隐藏面板；flase：显示面板。示例：4）开始时间：语法：starttime=mm:ss（分：秒）说明：该属性规定音频或视频文件开始播放的时间。未定义则从文件开头播放。示例：,任务 2 婉约配乐页面页面中播放音乐【知识储备】,5）音量大小：语法：volume=0-100之间的整数说明：该属性规定音频或视频文件的音量大小。未定义则使用系统本身的设定。示例：6）容器属性：语法：height=#width=#说明：取值为正整数或百分数，单位为像素。该属性规定控制面板的高度和宽度。height：控制面板的高度；width：控制面板的宽度。示例：,任务 2 婉约配乐页面页面

13、中播放音乐【知识储备】,7）容器单位：语法：units=pixels、en说明：该属性指定高和宽的单位为pixels或en。示例：8）外观设置：语法：controls=console、smallconsole、playbutton、pausebutton、stopbutton、volumelever 说明：该属性规定控制面板的外观。默认值是console。console：一般正常面板；smallconsole：较小的面板；playbutton：只显示播放按钮；pausebutton：只显示暂停按钮；stopbutton：只显示停止按钮；volumelever：只显示音量调节按钮。示例：,任务

14、2 婉约配乐页面页面中播放音乐【知识储备】,9）对象名称：语法：name=#说明：#为对象的名称。该属性给对象取名，以便其他对象利用。示例：10）说明文字：语法：title=#说明：#为说明的文字。该属性规定音频或视频文件的说明文字。示例：11）前景色和背景色：语法：palette=color|color说明：该属性表示嵌入的音频或视频文件的前景色和背景色，第一个值为前景色，第二个值为背景色，中间用|隔开。color可以是rgb色（rrggbb）也可以是颜色名，还可以是transparent（透明）。示例：,任务 2 婉约配乐页面页面中播放音乐【知识储备】,12）对齐方式：语法：align=t

15、op、bottom、center、baseline、left、right、texttop、middle、absmiddle、absbottom说明：该属性规定控制面板和当前行中的对象的对齐方式。center：控制面板居中；left：控制面板居左；right：控制面板居右；top：控制面板的顶部与当前行中的最高对象的顶部对齐；bottom：控制面板的底部与当前行中的对象的基线对齐；baseline：控制面板的底部与文本的基线对齐；texttop：控制面板的顶部与当前行中的最高的文字顶部对齐；middle：控制面板的中间与当前行的基线对齐；absmiddle：控制面板的中间与当前文本或对象的中间对

16、齐；absbottom：控制面板的底部与文字的底部对齐。示例：,素材收集,02,创建站点，用Dreamweaver CS制作网页(实例图片文字内容见本章素材文件夹)实例素材：第八单元 audio 效果文件：第八单元“audio1.html”、“audio2.html”,任务实施,03,任务 2 婉约配乐页面页面中播放音乐【任务实施】,网页中播放音频使用标签来定义，下面将呈现电影插曲音乐的制作方法。1）构建HTML结构（1）将素材实例文件夹拷贝至创建My Web站点的根目录中。（2）启动Dreamweaver CS，打开“文件”面板，在拷贝的文件夹中创建一个名为“audio1.html”的网页文

17、档，并在文档编辑窗口中打开。（3）添加图片。（4）添加音乐。添加代码如下:,任务 2 婉约配乐页面页面中播放音乐【任务实施】,（5）保存文件。按Ctrl+S组合键保存网页，然后按F12键在浏览器中预览效果，此页面完成。如图8-3所示的插入音乐播放器。图8-3 插入音乐播放器,任务 2 婉约配乐页面页面中播放音乐【任务实施】,2）构建CSS样式（1）页面中引入CSS样式属性方法。在标签之间输入如下代码：（2）设置CSS样式属性页面中图片元素代码：,.imgmargin-left:20px;background-image:url(music2.png);widows:262px;height:2

18、64px;background-repeat:no-repeat;,任务 2 婉约配乐页面页面中播放音乐【任务实施】,（3）保存文件。按Ctrl+S组合键保存网页，然后按F12键在浏览器中预览效果，此页面完成。如图8-4所示的预览效果页面。图8-4 预览效果页面,知识归纳,04,使用标签来定义网页中背景音效，完成图8-5 所示效果,目录页/Contents,01,任务1 微视频网页展播视频播放页面,02,任务2 婉约配乐页面页面中播放音乐,任务3 新春寄语页面页面中插入动画,03,知识储备,01,任务 3 新春寄语页面页面中插入动画,【知识储备】,Flash是网上流行的矢量动画技术，近几年很多

19、站点都采用了Flash技术，把传统网页无法做到的效果准确表现出来，增强了网页的吸引力，如使用Flash制作的导航条、按钮动感十足。Dreamweaver中提供的Flash元素主要包括Flash动画、FlashPaper、Flash视频，以及内建的Flash按钮和Flash文本。Flash动画中的元素都是矢量的，可以随意放大，都不会降低画面质量。此外，Flash动画文件较小，适合在网络上使用。Flash动画的扩展名为“.swf”。,【知识储备】,任务 3 新春寄语页面页面中插入动画,【知识储备】,网页中插入flash的三种方法，分别为:1.网页中插入Object元素标签，实现插入FLASH动画。

20、通过可视化界面，“插入”下拉菜单选项中选择“媒体”，继续选择“SWF”文件，找到要插入的SWF文件，然后确定。如图8-7所示的插入动画。,【知识储备】,图8-7 插入动画,任务 3 新春寄语页面页面中插入动画,【知识储备】,输入标题确认，如图8-8所示的对象标签辅助功能属性,【知识储备】,图8-8 对象标签辅助功能属性,任务 3 新春寄语页面页面中插入动画,【知识储备】,在可视化界面中，动画插入完成，可见图8-9插入动画,【知识储备】,图8-9 插入动画,任务 3 新春寄语页面页面中插入动画,【知识储备】,2.embed方式 代码中object的部分去掉，仅留embed标签，flash也可正常

21、先显示。这种方式在IE和firefox下浏览均很正常。3.SWFObject方式 这是一个第三方控件，可以到SWFObject官方下载：http:/解压之后把其中的swfobject.js和expressInstall.swf两个文件拷贝到一个文件夹中。在中插入。代码语法为，在需要显示flash的地方插入，flash将显示在标签中，也可以在标签中插入文字或图片，有利于搜索引擎收录，且不影响flash的显示。,【知识储备】,素材收集,02,创建站点，用Dreamweaver CS制作网页（实例图片文字内容见本章素材文件夹）实例素材：第八单元flash效果文件：第八单元“f02.html”,任务实

22、施,03,任务 3 新春寄语页面页面中插入动画,【任务实施】,在网页中插入动画，采用第一种方法Object元素标签，实现插入FLASH动画。（1）将素材实例文件夹拷贝至创建My Web站点的根目录中。（2）启动Dreamweaver CS，打开“文件”面板，在拷贝的文件夹中创建一个名为“f02.html”的网页文档，并在文档编辑窗口中打开。（3）“插入”菜单选择“媒体”选择“SWF”，插入动画。（4）保存文件。按Ctrl+S组合键保存网页，然后按F12键在浏览器中预览效果，此页面完成。如图8-10所示的预览效果页面。,图8-10 预览效果页面,知识归纳,04,任务 3 新春寄语页面页面中插入动

23、画,【知识归纳】,SWFObject2提供两种不同的方法来嵌入Flash Player内容：静态发布的方法用标准的标记嵌入flash内容和替代元素，并使用js来解决那些单独用标记无法解决的问题。动态发布方法是基于标记的替代内容，通过js用flash来替换替代内容，前提是当前flash版本和js支持，像之前的 SWFObject版本和UFO。静态发布的优势：促进实际制作符合标准的标记；最佳嵌入性能；嵌入Flash内容的机制，不依赖于脚本语言，所以flash内容可以被更多的人看到兼容性更好；如果你有Flash插件安装，但已禁用JavaScript或使用的浏览器不支持JavaScript，您将仍然能够看到你的Flash内容。flash可以运行在对js支持非常糟糕的设备上，比如sony的psp。动态发布的优势：它与脚本的应用程序很好地集成在一起，能够使动态变量flashvars。它避免了点击激活机制激活活动内容在Internet Explorer6/7和Opera9+。请注意，微软已经淘汰了其Internet Explorer浏览器的最活跃的内容。,谢 谢 观 看,