《网页设计与制作》第5章.pptxVIP

《网页设计与制作》主讲人：XXX邮箱：XXXXXXXXXXX电话：XXXXXXXXXXXX

Neverputoffwhatyoucandotodayuntiltomorrow.每讲一语Thehoweverbigtheproblem，tellyourheart，“Alliswell，pal”无论问题有多大，告诉你的心，“一切皆好，朋友。”《三傻大闹宝莱坞》

书本内容引导解读

（重点）学习目标第5章HTML音频与视屏一、音频与视频二、多媒体标记与技巧三、多媒体扩展知识

（重点）5.1音频与视频5.1.1音频控件5.1.2插入视频5.1.3插入音频5.1.4自动播放5.1.5循环播放5.1.6预加载媒体文件

（重点）5.1.1视音频控件

（重点）视音频添加控件在HTML开发中音频与视频是不能直接播放的。我们只是把音频与视频搬到了网页上，让浏览器知道有这么一个东西，并且能够显示出来。但是，却播放不了。因为我们没有让它播放，所以我们要给它添加一个控件。点击这个控件之后，浏览器就能够进行播放了。controls属性会告诉浏览器添加一套用于控制视频播放的控件。通常，只有用户点击播放按钮后，视频或者音频才能开始播放。

（重点）5.1.2插入视频

（重点）1、video标记video标记的作用是在HTML页面中嵌入视频元素。其基本语法格式如下所示。videowidth=320height=240controlssrc=movie.mp4/video2、embed标记embed标记的作用是在HTML页面中嵌入多媒体元素。其基本语法格式如下所示。embedwidth=200height=200controlssrc=movie.mp4

（重点）3、object标记object标记的作用是在HTML页面中嵌入多媒体元素。其基本语法格式如下所示。objectdate=movie.mp4width=320height=240controls

（重点）5.1.3插入音频

（重点）1、audio标记audio标记定义声音。其基本语法格式如下所示。audiosrc=ACK.mp3controls=controls/audio2、embed标记embed标记的作用是在HTML页面中嵌入多媒体元素。其基本语法格式如下所示。embedwidth=200height=200controlssrc=ACK.mp3

（重点）3、object标记object标记的作用是在HTML页面中嵌入多媒体元素。其基本语法格式如下所示。objectdate=ACK.mp3controls

（重点）5.1.4自动播放

（重点）视频与音频都能够进行自动播放，在网页上我们会经常遇到，就比如说当我们在网页百度搜索一些生活常识时，在有视频的情况下，它的视频会自动播放，不需要我们再去点击。而音频我们就更常见了，比如很多网页我们点击进去就会有背景音乐，而它的背景音乐就是自动播放的。之前插入视频与音频之前，需要添加controls控件，但要想实现自动播放则需要取消controls控件，再加上autoplay属性，即可实现自动播放。其基本语法格式如下所示。audiosrc=rubberduckies.mp3autoplay=autoplay/audiovideosrc=rubberduckies.mp4autoplay=autoplay/video

（重点）5.1.5循环播放loop属性告诉浏览器在播放结束时，再从头开始重新播放。其基本语法格式如下所示。audiosrc=rubberduckies.mp3controls=controlsloop=loop/audiovideosrc=rubberduckies.mp4controls=controlsloop=loop/video

（重点）loop属性告诉浏览器在播放结束时，再从头开始重新播放。其基本语法格式如下所示。audiosrc=rubberduckies.mp3controls=controlsloop=loop/audiovideosrc=rubberduckies.mp4controls=controlsloop=loop/video

（重点）5.1.6预加载媒体文件preload是一个有用的属性，它告诉浏览器应该怎样加载一个媒体文件。指定preload的值为auto,让浏览器下载整个文件，以便用户