《《WEB前端开发实用案例教程》单元8 电影音乐网—页面中插入视频、音频、动画》由会员分享，可在线阅读，更多相关《《WEB前端开发实用案例教程》单元8 电影音乐网—页面中插入视频、音频、动画（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,创建站点，用DreamweaverCS制作网页(实例图片文字内容见本章素材文件夹)实例素材：第八单元viedo效果文件：第八单元“viedo-1.html”,任务实施,03,任务1微视频网页展播视频播放页面【任务实施】,微视频网页具体制作，我们分为构建HTML结构和设置CSS样式属性两部分来进行。1）构建HTML结构（1）将素材实例文件夹拷贝至创建My
5、Web站点的根目录中。（2）启动DreamweaverCS，打开“文件”面板，在拷贝的文件夹中创建一个名为“viedo-1.html”的网页文档，并在文档编辑窗口中打开。（3）添加图片。（4）添加视频。（5）添加播放器按钮。（6）使用JavaScript定义了一个控制播放或者暂停的按钮，使用onliclick事件定义方法。,任务1微视频网页展播视频播放页面【任务实施】,您的浏览器不支持video标签播放,快进5秒快退5秒音量+音量-静音,代码如下：,（7）保存文件。按Ctrl+S组合键保存网页，然后按F12键在浏览器中预览效果，此页面完成。,任务1微视频网页展播视频播放页面【任务实施】,but
6、tondisplay:inline-block;/*强制转换为行内块元素*/outline:none;/*该元素获得焦点时，不出现虚线框（或高亮框）*/cursor:pointer;/*鼠标悬停时变为“小手”*/text-align:center;text-decoration:none;/*字体样式：字体大小14px/行高100%字体名称*/,2）构建CSS样式（1）设置CSS样式属性整体页面中文字元素代码，使用外部样式表。内容代码如下：,代码内容1,任务1微视频网页展播视频播放页面【任务实施】,font:14px/100%Arial,Helvetica,sans-serif;padding
7、:0.5em2em0.55em;/*顶部内边距0.5em、左右内边距2em、底部内边距0.55em*/text-shadow:01px1pxrgba(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/*设置所有按钮鼠标悬停效果*/text-decoration:none;/*清除文本样式*
8、/#vdmargin:0auto;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是代表视频，在video标签中添加controls属性，用于设置或返回浏览器应当
9、显示标准的音频空间。单击播放按钮，视频开始播放。如图8-2所示的视频开始播放效果。,图8-2视频开始播放效果,目录页/Contents,01,任务1微视频网页展播视频播放页面,02,任务2婉约配乐页面页面中播放音乐,任务3新春寄语页面页面中插入动画,03,知识储备,01,任务2婉约配乐页面页面中播放音乐【知识储备】,在网页中添加声音有两种方式，一种是以插入音频的形式，通过播放器控制音频；另一种是以添加背景音乐的形式，在加载页面时自动播放音频。1.插入背景音乐，使用元素，只适用于ie，基本语法是:属性说明src=url音乐路径，表示设定midi档案及路径，可以是相对或绝对。属性说明autosta
10、rt=true，表示是否在音乐档下载完之后就自动播放。true是，false否(内定值)。属性说明loop=infinite，表示是否自动反复播放。loop=2表示重复两次，infinite表示重复多次。,任务2婉约配乐页面页面中播放音乐【知识储备】,2.插入音频，使用元素标签。用来插入各种多媒体，格式可以是midi、wav、aiff、au等等，netscape及新版的IE都支持。其参数设定如下，基本语法是:属性设置说明:1）自动播放：语法：autostart=true、false说明：该属性规定音频或视频文件是否在下载完之后就自动播放。true：音乐文件在下载完之后自动播放；false：音乐
11、文件在下载完之后不自动播放。示例：,任务2婉约配乐页面页面中播放音乐【知识储备】,2）循环播放：语法：loop=正整数、true、false说明：该属性规定音频或视频文件是否循环及循环次数。属性值为正整数值时，音频或视频文件的循环次数与正整数值相同；属性值为true时，音频或视频文件循环；属性值为false时，音频或视频文件不循环。示例：,任务2婉约配乐页面页面中播放音乐【知识储备】,3）面板显示：语法：hidden=ture、flase说明：该属性规定控制面板是否显示，默认值为flase。ture：隐藏面板；flase：显示面板。示例：4）开始时间：语法：starttime=mm:ss（分：
12、秒）说明：该属性规定音频或视频文件开始播放的时间。未定义则从文件开头播放。示例：,任务2婉约配乐页面页面中播放音乐【知识储备】,5）音量大小：语法：volume=0-100之间的整数说明：该属性规定音频或视频文件的音量大小。未定义则使用系统本身的设定。示例：6）容器属性：语法：height=#width=#说明：取值为正整数或百分数，单位为像素。该属性规定控制面板的高度和宽度。height：控制面板的高度；width：控制面板的宽度。示例：,任务2婉约配乐页面页面中播放音乐【知识储备】,7）容器单位：语法：units=pixels、en说明：该属性指定高和宽的单位为pixels或en。示例：8
13、）外观设置：语法：controls=console、smallconsole、playbutton、pausebutton、stopbutton、volumelever说明：该属性规定控制面板的外观。默认值是console。console：一般正常面板；smallconsole：较小的面板；playbutton：只显示播放按钮；pausebutton：只显示暂停按钮；stopbutton：只显示停止按钮；volumelever：只显示音量调节按钮。示例：,任务2婉约配乐页面页面中播放音乐【知识储备】,9）对象名称：语法：name=#说明：#为对象的名称。该属性给对象取名，以便其他对象利用。示例
14、：10）说明文字：语法：title=#说明：#为说明的文字。该属性规定音频或视频文件的说明文字。示例：11）前景色和背景色：语法：palette=color|color说明：该属性表示嵌入的音频或视频文件的前景色和背景色，第一个值为前景色，第二个值为背景色，中间用|隔开。color可以是rgb色（rrggbb）也可以是颜色名，还可以是transparent（透明）。示例：,任务2婉约配乐页面页面中播放音乐【知识储备】,12）对齐方式：语法：align=top、bottom、center、baseline、left、right、texttop、middle、absmiddle、absbottom
15、说明：该属性规定控制面板和当前行中的对象的对齐方式。center：控制面板居中；left：控制面板居左；right：控制面板居右；top：控制面板的顶部与当前行中的最高对象的顶部对齐；bottom：控制面板的底部与当前行中的对象的基线对齐；baseline：控制面板的底部与文本的基线对齐；texttop：控制面板的顶部与当前行中的最高的文字顶部对齐；middle：控制面板的中间与当前行的基线对齐；absmiddle：控制面板的中间与当前文本或对象的中间对齐；absbottom：控制面板的底部与文字的底部对齐。示例：,素材收集,02,创建站点，用DreamweaverCS制作网页(实例图片文字内
16、容见本章素材文件夹)实例素材：第八单元audio效果文件：第八单元“audio1.html”、“audio2.html”,任务实施,03,任务2婉约配乐页面页面中播放音乐【任务实施】,网页中播放音频使用标签来定义，下面将呈现电影插曲音乐的制作方法。1）构建HTML结构（1）将素材实例文件夹拷贝至创建MyWeb站点的根目录中。（2）启动DreamweaverCS，打开“文件”面板，在拷贝的文件夹中创建一个名为“audio1.html”的网页文档，并在文档编辑窗口中打开。（3）添加图片。（4）添加音乐。添加代码如下:,任务2婉约配乐页面页面中播放音乐【任务实施】,（5）保存文件。按Ctrl+S组合键保存网页，然后按F12键在浏览器中预览效果，此页面完成。如图8-3所示的插入音乐播放器。图8-3插入音乐播放器,任务2婉约配乐页面页面中播放音乐【任务实施】,2）构建CSS样式（1）页面中引入CSS样式属性方法。在标签之间输入如下代码：（2）设置CSS样式属性页面中图片元素代码：,
