《教学课件任务10:网页中视音频的应用.pptx》由会员分享,可在线阅读,更多相关《教学课件任务10:网页中视音频的应用.pptx(20页珍藏版)》请在得力文库 - 分享文档赚钱的网站上搜索。
1、教材配套资源页完整PPT课件教学课件任务10:网页中视音频的应用1网页设计与开发项目10 网页中视音频的应用2任务10-1 网页中视音频的应用 知识点 了解video元素支持的视频格式 了解audio元素支持的音频格式 掌握在网页中引入音视频的标准方法及其属性技能点 能够在网页中熟练加入音频 能够在网页中熟练加入视频 能够根据需要对音视频进行属性设置3一、web上的视频u在HTML5出现之前Web视频并没有一个标准,有些网站使用Flash插入视频,但是要求用户有Flash播放器;也有些网站使用Java播放器,但是要在JVM虚拟机中解码视频和音频需要用户拥有一台配置较高的机器。uHTML5规定了
2、一种通过video元素来包含视频的标准方法。uvideo元素目前仅支持三种格式的视频文件。4一、web上的视频video元素支持的视频格式u在HTML5中支持的视频格式主要包括Ogg、MPEG 4、WebM等。uOgg:指带有Theora视频编码和Vorbis音频编码的Ogg文件。Ogg指一种文件封装容器,可以纳入各式各样自由和开放源代码的编解码器,包含音效、视频、文字与元数据的处理。其中,Theora是开源的免费的视频压缩编码技术,质量可以与主流的数字视频压缩编解码标准H.264相媲美;Vorbis是 Ogg的音频编码,类似于MP3等的音乐格式,但是它是完全免费、开放和没有专利限制的。5一、
3、web上的视频video元素支持的视频格式uMPEG 4:指带有H.264视频编码和AAC音频编码的mpeg文件。同等条件下,mpeg4格式的视频质量较好,它的专利被MPEG-LA公司控制,任何支持播放mpeg4视频的设备,都必须拥有MPEG-LA颁发的许可证。mpeg4有3种编码,mpg4(xdiv),mpg4(xvid),avc(h264),h.264是公认的mp4标准编码,如果在网页开发中有浏览器不能识别的mpeg文件可以尝试用视频格式转换器转换一下格式。AAC是一种由MPEG-4标准定义的有损音频压缩格式,提供了目前最高的编码效率。uWebM:指带有VP8视频编码和Vorbis音频编码
4、的WebM文件。WebM由Google提出,是一个开放、免费的媒体文件格式,其中Google将其拥有的VP8视频编码技术开源,Ogg Vorbis本来就是开放格式。WebM 项目旨在为对每个人都开放的网络开发高质量、开放的视频格式,其重点是解决视频服务这一核心的网络用户体验。6一、web上的视频语法格式u在html5中,Web开发者可以用一种标准的方式指定视频的外观。u语法格式如下: u使用标签来定义视频播放器,不仅仅设置了要播放的视频文件,还包括视频的控制栏,例如播放、暂停、进度和音量控制、全屏等功能,更重要的是还可以自定义这些功能和控制栏的样式。7一、web上的视频video基本属性usr
5、c和controls是标签的基本属性,src属性用于设置视频文件的路径,controls属性用于为视频提供播放控件,并且标签之间还可以插入文字,用于浏览器不能支持视频的时候显示。例如:浏览器不支持该视频,请下载最新版本的浏览器u注意:苹果操作系统的Safari浏览器只支持 MP4类型,而ogg格式的视频则是适用于Firefox、Opera以及Chrome 浏览器。IE 8不支持video元素,IE 9开始提供了对使用 MPEG4的video元素的支持。8一、web上的视频source元素u如果我们不确定自己的浏览器支持什么格式的视频,可以使用source元素给浏览器提供多种格式的视频文件选择。
6、uvideo元素允许嵌套多个source元素,source元素可以链接不同的视频文件,浏览器将使用第一个可识别的格式。例如: 您的浏览器不支持此种视频格式。9一、web上的视频其他常用属性属性值描述width像素或百分比设置视频播放窗口的宽度height像素或百分比设置视频播放窗口的高度autoplayautoplay当页面载入完成后自动播放视频。looploop视频结束时重新开始播放。preloadpreload如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用autoplay,则忽略该属性。10一、web上的视频其他常用属性uwidth、height属性用于设置视频播放窗口的
7、宽高。在HTML5中,经常会通过为video元素添加宽高的方式给视频预留一定的空间,这样浏览器在加载页面时就会预先确定视频的尺寸,为其保留合适的空间,使页面的布局不产生变化。u视频播放时有时上下还有黑边框,用户体验很不好。为了让视频在web端自适应,可以设置video标签属性宽度为100%,高度为auto,如下:video /*width:100%*/ max-width: 100%; height: auto;u如果width属性设置为 100%,视频播放器会根据屏幕大小自动调整比例,且可以比原始尺寸大;max-width 属性设置为 100%,视频播放器会根据屏幕自动调整比例,但不会超过其
8、原始大小。11一、web上的视频其他常用属性uautoplay属性用于设置视频是否自动播放,是一个布尔属性。当出现时,表示自动播放,去掉表示不自动播放。注意,表示自动播放时该属性要么没有值,要么其值恒等于属性名;而在标签中不使用该属性表示不自动播放。uloop属性用于指定视频是否循环播放,同样也是一个布尔属性。12一、web上的视频其他常用属性preload属性用于定义视频是否预加载。有三个属性值可选择:none、metadata、auto。如果不使用此属性,默认为auto。none:不进行预加载。选择此属性值多数情况是开发者认为用户不期望此视频,或者为了减少HTTP请求。metadata:部
9、分预加载。选用此属性值预先为用户提供一些元数据(包括尺寸,第一帧,曲目列表,持续时间等等)。auto:全部预加载。为用户预先加载了该视频。13二、web上的音频uHTML5出现之前在网页中播放音频也没有固定的标准,大多数音频是通过插件(如Flash)来播放的,但是并非所有浏览器都有同样的插件,尤其是主流浏览器已经纷纷宣布停止支持Flash插件,网站正在转向开放的web技术。uHTML5 规定了一种通过 audio 元素来包含音频的标准方法。14二、web上的音频audio元素支持的音频格式uOgg Vorbis:Ogg Vorbis是一种音频压缩格式,类似于MP3等音乐格式。Ogg是完全免费、
10、开放和没有专利限制的。OggVorbis文件的扩展名是.ogg,这种文件的设计格式非常先进,可以在未来的任何播放器上播放,因此,这种文件格式可以不断地进行大小和音质的改良,而不影响旧有的编码器或播放器。uMP3:是一种音频压缩技术,其全称是动态影像专家压缩标准音频层面3(Moving Picture Experts Group Audio Layer III),简称为MP3。它被设计用来大幅度地降低音频数据量。uwav:是录音时用的标准的Windows文件格式,文件的扩展名为“wav”,数据本身的格式为PCM或压缩型,属于无损音乐格式的一种。15二、web上的音频语法格式uaudio元素语法格
11、式:您的浏览器不支持audio标签usrc 属性描述了音频文件的地址 (URL),controls属性规定浏览器为音频提供播放控件。16二、web上的音频语法格式属性值描述autoplayautoplay当页面载入完成后自动播放音频。looploop音频结束时重新开始播放。preloadpreload如果出现该属性,则音频在页面加载时进行加载,并预备播放。如果使用 autoplay,则忽略该属性。audio其他常用属性17二、web上的音频音频中的source元素u目前所有的主流PC、移动端浏览器的最新版已经全部支持了mp3格式,Ogg文件格式的音频可以在 Firefox、Opera和Chrome浏览器下播放,如果要在Internet Explorer和Safari浏览器播放音频,则必须使用 MP3 文件。u为了解决不同浏览器对音频文件的兼容性,在HTML5中,仍然可以运用source元素可以为audio元素提供多个备用文件。 您的浏览器不支持 audio 元素。18实训任务u完成网上商城首页中的视频广告部分,使用默认的视频控制栏。19本课件制作整理者:郭迎春 仅可用于教学、学习、交流使用 如内容、图片、字体等有侵权,请联系删除。 20
限制150内