《网页设计》课件-5-2插入多媒体对象

插入多媒体对象目录◎滚动字幕标签<marquee>◎插入多媒体文件<embed>标签◎

HTML5插入视频◎

HTML5插入音频1滚动字幕标签<marquee><marquee>标签可以实现元素在网页中移动的效果语法：<marquee属性1=value1属性2=value2…>滚动内容</marquee>;<marquee>标签有很多属性，用来定义元素的移动方式。属性描述direction设定文字的滚动方向，left表示向左，right表示向右，up表示向上滚动loop设定文字滚动次数，其值是正整数或infinite表示无限次，或者为-1也为无限次，默认为无限循环height设定字幕高度width设定字幕宽度scrollamount指定每次移动的速度，数值越大速度越快scrolldelay文字每一次滚动的停顿时间，单位是毫秒，时间越短滚动越快align指定滚动文字与滚动屏幕的垂直对齐方式，取值top、middle、bottombgcolor设定文字卷动范围的背景颜色hspace指定字幕左右空白区域的大小vspace指定字幕上下空白区域的大小举例演示【实例7-1】使用marquee制作图像滚动效果。<marqueedirection="left"scrollamount="2"scrolldelay="50"direction="left"></marquee><marqueeonMouseOver="this.stop()"onMouseOut="this.start()"scrollamount="2"scrolldelay="50">如果想实现鼠标放在图像上时图片将会静止，鼠标移开后图像继续滚动的效果，代码可以修改为：<embed>标签也插入各类多媒体元素。语法：<embedsrc="路径"属性1=value1属性2=value2…></embed>;embed元素的常用属性。2插入多媒体文件<embed>标签属性描述scr设定媒体文件的路径autostart=true/false媒体文件是否传送后就自动播放，true是要，false是不要，默认为falseloop=true/false设定播放的重复次数，loop=6就表示重复6次，true表示无限次播放，false表示播放一次停止startime="分：秒"设定音乐的开始播放时间，如20s后播放startime=00:20volume=0-100设定音量的大小，如没设定，就用系统音量width/height设定播放空间面板的大小hidden=true隐藏播放控件面板control=console/smallconsole设定播放控件面板的外观在html5中，video标签用于定义播放视频文件的内容，标准以及相应的属性，他支持三种视频格式分别是ogg，mpeg4和webm，其基本的语法格式如下embedHtml5中插入视频和音频会用到video元素和audio元素，那么在Html5出来之前，我们是通过什么来标签来为网页中添加音视频的呢？embed在html5中，video标签用于定义播放视频文件的内容，标准以及相应的属性，他支持三种视，其基本的语法格式如下embed元素在html5中，video标签用于定义播放视频文件的内容，标准以及相应的属性，他支持三种视，其基本的语法格式如下Html5中的新标签在html5中，video标签用于定义播放视频文件的内容，标准以及相应的属性，他支持三种视，其基本的语法格式如下

在html5出现之前的html4.0和xhtml中，embed标签就已经被广泛的使用。大家现在看到的就是html4.0和Xhtml中的embed的完整标签。<embedsrc=“20.wmv"width="560"height="300"autostart="true"loop="true"></embed>Src:属性用于设置音频文件的路径autostart:属性用于设置自动播放loop:属性用于设置循环播放True在html5中，video标签用于定义播放视频文件的内容，标准以及相应的属性，他支持三种视，其基本的语法格式如下<embedsrc=“1.swf"width="200"height="200"/>

在html4和xhtml的embed标签中主要插入的视频格式是wmv和avi格式。

目前在html5的embed标签中主要插入的视频格式是

swf

格式。视频使用video元素音频使用audio元素那么为什么有的网站又说embed标签是html5中的新标签呢？这是有原因的，首先我们来看下html5中的embed标签。举例演示【实例7-2】实现网页中插入音乐。举例演示【实例7-3】实现网页中插入视频。3HTML5插入视频video

在html5中，video标签用于定义播放视频文件的内容，标准以及相应的属性，他支持三种视频格式分别是ogg，mpeg4和webm，其基本的语法格式如下:<videosrc=“movie/1.mp4”controls=“controls”></video>Src:属性用于设置视频文件的路径controls:属性用于为视频提供播放控件Src:属性用于设置视频文件的路径video属性值描述autoplayautoplay当页面载入完成后自动播放视频。looploop视频结束时重新开始播放。preloadpreload如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用"autoplay"，则忽略该属性。posterurl当视频缓冲不足时，该属性值链接一个图像，并将该图像按照一定的比例显示出来。3HTML5插入视频video元素的常见属性在html5中，video标签用于定义播放视频文件的内容，标准以及相应的属性，他支持三种视频格式分别是ogg，mpeg4和webm，其基本的语法格式如下在html5中，video标签用于定义播放视频文件的内容，标准以及相应的属性，他支持三种视频格式分别是ogg，mpeg4和webm，其基本的语法格式如下video<videosrc=“movie/1.mp4”controls=“controls”autoplay=“autoplay”Loop=“loop”></video>插入的视频为movie文件夹下的1.mp4视频结束是重新开始播放显示播放控件页面载入后视频自动播放src=“movie/1.mp4”controls=“controls”autoplay=“autoplay”Loop=“loop”举例演示【实例7-4】实现网页中插入视频。4HTML5插入音频audio在html5中，audio标签用于定义播放音频文件的内容，标准以及相应的属性，他支持三种音频格式分别是ogg，mp3和wav，

其基本的语法格式如下:<audiosrc=“music/1.mp3”controls=“controls”></audio>controls:属性用于为音频提供播放控件Src:属性用于设置音频文件的路径mp3wav4HTML5插入音频属性值描述autoplayautoplay当页面载入完成后自动播放视频。looploop视频结束时重新开始播放。preloadpreload如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用"autoplay"，则忽略该属性。audio元素的常见属性举例演示【实例7-6】实现网页中插入音频。在html5中，video标签用于定义播放视频文件的内容，标准以及相应的属性，他支持三种视频格式分别是ogg，mpeg4和webm，其基本的语法格式如下source在html5中，audio标签用于定义播放音频文件的内容，标准以及相应的属性，他支持三种视频格式分别是ogg，mp3和wav，

其基本的语法格式如下:<audiosrc=“music/1.mp3”controls=“controls”></audio>controls:属性用于为音频提供播放控件Src:属性用于设置音频文件的路径国际主流的浏览器IEFirefoxOperaChromeSafari在html5中，video标签用于定义播放视频文件的内容，标准以及相应的属性，他支持三种视频格式分别是ogg，mpeg4和webm，其基本的语法格式如下video格式IE9Firefox4.0Opera10.6Chrome6.0Safari3.0Ogg

支持支持支持

MPEG4支持

支持支持WebM

支持支持支持

常用浏览器对视频格式的支持情况在html5中，video标签用于定义播放视频文件的内容，标准以及相应的属性，他支持三种视频格式分别是ogg，mpeg4和webm，其基本的语法格式如下video格式IE9Firefox4.0Opera10.6Chrome6.0Safari3.0OggVorbis

支持支持支持

MP3支持

支持支持Wav

支持支持

支持常用浏览器对视频格式的支持情况在html5中，video标签用于定义播放视频文件的内容，标准以及相应的属性，他支持三种视频格式分别是ogg，mpeg4和webm，其基本的语法格式如下videoSource元素

运用source元素就可以为video元素或audio元素提供多个备用文件来应对不同的浏览器。基本语法格式如下：<videocontrols=”controls”><sourcesrc=”movie/1.ogg”type=”video/ogg”><sourcesrc=”movie/1.mp4”type=”video/mp4”></video>src：是用来制定媒体文件的地址type：是指定媒体文件的类型<sourcesrc=”movie/1.ogg”type=”video/ogg”><sourcesrc=”movie/1.mp4”type=”video/mp4”>在html5中，video标签用于定义播放视频文件的内容，标准以及相应的属性，他支持三种视频格式分别是ogg，mpeg4和webm，其基本的语法格式如下video

运用source元素就为audio元素提供多个备用文件来应对不同的浏览器。基本语法格式如下：<audiocontrols=”controls”><sourcesrc=”movie/