由于网络带宽的不断提升,网络应用中多媒体元素随处可见。本节学习利用HTML代码在网页中加入多媒体元素。
说明 :多媒体元素范围比较广,一般指音频文件、视频文件及Flash动画文件。
如果只是为网页添加背景音乐,使用HTML中的单标签<bgsound/>是简单快捷的办法。<bgsound/>标签有两个属性,src和loop。
类似于<img/>标签,<bgsound/>标签的src属性用于指定所连接的音乐资源路径,常用的音乐文件格式有midi、wav、mp3等。不过由于页面须完全载入音乐文件到浏览器端,音乐文件才开始播放,所以体积小巧的midi音乐文件是最佳选择。<bgsound/>标签的loop属性用于指定背景音乐的循环播放次数,如果设置为-1,则表示无限循环。在这种情况下,浏览者可以通过单击浏览器的“停止”按钮停止背景音乐的播放。
说明 :midi音乐文件音乐细节比较简单,如果不在乎背景音乐的延迟,读者可以选择音质较好的mp3文件。wav文件体积最大,所以不推荐使用。
在D:\web\目录下创建audio目录,放入文件名为wind.mp3的音乐文件。创建网页文件,命名为bgsound.htm,编写代码如代码6.1所示。
代码6.1 背景音乐:bgsound.htm
在浏览器地址栏输入http://localhost/bgsound.htm,浏览效果如图6.1所示。
图6.1 背景音乐
网页中只有背景音乐是不足以吸引浏览者的,网页可以实现调用浏览者系统的媒体播放器,播放网络上的音乐及视频资源。HTML技术中能完成上述功能的是双标签<embed></embed>,其最常用的属性是src,和前面的标签一样,用于指定资源的路径。
说明 :<embed></embed>标签可以插入多种音频和视频格式,格式播放支持取决于浏览者系统中的播放器,确保浏览者系统中的播放器支持网络上相应格式的多媒体资源播放。
<embed></embed>标签的width和height两个属性也是影响显示的,用于设置播放器界面的宽度和高度,单位默认为像素。<embed></embed>标签的autostart属性用于设置是否自动播放,autostart属性取值为true或false,前者为自动播放,后者为浏览者控制是否播放。
说明 :在默认情况下,多媒体资源不是自动播放的。
除了播放音频和视频文件外,<embed></embed>标签还可以插入外部的Flash动画文件。Flash是网络上最流行的动画元素,有着丰富的表现力,其文件扩展名为.swf。在D:\web\目录下创建video目录,放入文件名为nba.wmv的视频文件。在D:\web\目录下创建swf目录,放入文件名为mouse.swf的Flash动画文件。创建网页文件,命名为media.htm,编写代码如代码6.2所示。
代码6.2 多媒体资源的设置:media.htm
由代码6.2可知,笔者在media.htm页面中用了两组<embed></embed>标签,上面的用于播放nba.wmv视频文件,下面用于播放wind.mp3音频文件,并且视频文件的<embed></embed>标签设置为自动播放。在浏览器地址栏输入http://localhost/media.htm,浏览效果如图6.2所示。
图6.2 多媒体资源的设置
从media.htm的操作体验中,读者会发现操作时多媒体元素周围有虚线框,必须单击后才能操作播放器或Flash动画。在后面的JavaScript学习中将解决这个问题。
说明 :造成虚线框这种情况很正常,是微软在2006年发布的一个补丁所导致的。