欢迎来到天天文库
浏览记录
ID:52771193
大小:2.28 MB
页数:62页
时间:2020-03-08
《网页设计与制作 教学课件 作者 朱金华 第11章 网页多媒体实现.pptx》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库。
1、第11章网页多媒体实现教学目标掌握HTML5中多媒体元素的基本属性、常用方法和重要事件。2.熟悉HTML绘图的方法。3.熟悉CSS动画设计。教学内容11.1多媒体元素基本属性11.2HTML绘图基础11.3CSS动画设计11.4网页中的Flash动画与视频教学重点和难点重点:HTML5中的多媒体元素、HTML绘图基础、CSS动画设计。难点:HTML绘图基础、CSS动画设计。导入:在HTML4或之前版本中常常引用Flash插件来实现Web页面中播放视频或音频文件,通过、元素设置一些低效、冗余的属性来实现,使用
2、时不仅不便,而且还存在页面安全的隐患。因此,HTML5中新增了和元素和对应的API文件来实现视音频的播放。11.1HTML5中的多媒体元素11.1.1多媒体元素的基本属性在HTML5中播放视频与音频文件十分简单,只需添加或元素,并简单设置元素的一些基本属性,就可以在页面中播放多媒体文件。1.元素格式用于影视文件的播放,用于音频文件的播放。在两个多媒体元素的开始标记与结束标记间放置文本内容,可以在不支持该元素的浏览器中使用,即如果浏览器不支持这两个多媒体元
3、素,那么将显示开始与结果标记之间的文本内容。由于各大浏览器对音视频格式的支持不相同,本章以支持HTML5和CSS3格式最多的Chrome为测试标准。11.1.1多媒体元素的基本属性11.1.1多媒体元素的基本属性在本实例中,创建多媒体元素后,通过“src”属性指定播放文件的URL。为了在页面加载完成后实现自动播放功能,需要添加一个“autoplay”属性,并将该属性的值设置为“true”;该属性的功能是告诉浏览器是否自动播放视频或音频文件,默认值为“false”,表示不会自动播放。注意,在音频元素中,为了能正常播放音频文件
4、,必须将“controls”属性设置为“true”,表示显示音频元素自带的控制条工具。2.controls属性在第一个实例中,我们为多媒体元素添加了controls属性,视频元素的controls属性,将在视频元素的底部展示一个元素自带的控制条工具。虽然由于浏览器不同,控制条工具的样式会有些变化,但所有控制条都有一个播放/暂停控件、一个进度条和音量开关,这些特征是不变的。只有当用户将鼠标悬停或Tab键聚焦至播放时的视频上时,所设置的控制条工具才能显示出来;一旦从视频上移开,控制条工具又隐藏起来。在元素的con
5、trols属性如果没有设置,页面中将不会显示任何效果,但该元素却存在于DOM中,通过JavaScript代码可以访问相关的元素。11.1.1多媒体元素的基本属性3.poster属性在HTML5的元素中,poster属性表示所选图片URL,如果添加该属性,将在视频文件播放前显示该图片,而不是默认显示视频文件的第一帧,还可以避免在播放的视频文件不可用时,出现一片空白区域,影响用户体验。11.1.1多媒体元素的基本属性实例中为元素新增一个poster属性,并选取一幅图片作为该属性的值,当播放视频文件时,在视频播放区
6、域中,首先将显示poster属性指定的图片。在Chrome浏览器中执行的页面效果如图11-2所示。11.1.1多媒体元素的基本属性11.1.1多媒体元素的基本属性4.其他属性(1)width和height属性width与height属性只适用于元素,表示设置媒体元素的大小,单位为像素。如果不设置则使用播放源文件的大小;如果播放源文件的大小不可用,则使用“poster”属性中的文件大小。如果只设宽度,则根据播放源文件的长宽比例,自动生成一个与之对应的高的值,以等比方式控制视频文件的大小。在此推荐用CSS样式代替宽高属性设置。
7、(2)networkState属性元素的networkState属性可以返回视频文件的网络状态。当浏览器读取视频文件时,将触发一个progress事件,通过该事件,可以获取视频文件在被打开过程中,各个不同阶段的网络状态值。networkState为只读属性,该属性对应4个返回值,如下表所示。11.1.1多媒体元素的基本属性(3)error属性error属性是一个只读属性,在使用多媒体元素加载或读取文件过程中,如果出现异常或错误,将触发元素的error事件。在该事件中,可以通过元素的error属性返回一个MediaError
8、对象,根据该对象的code返回当前的错误值。MediaError对象中code对应4个返回值,如下表所示。11.1.1多媒体元素的基本属性(4)readyState属性多媒体元素可以通过readyState
此文档下载收益归作者所有