欢迎来到天天文库
浏览记录
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
此文档下载收益归作者所有
