HTML5多媒体初探

spllot 2009-11-06

HTML5初案已经发布,在W3C上有一些相关的资料,今天做了一点小demo,主要是音屏标签和视屏标签的应用.其实用法很简单,主要是要找到一个支持的浏览器才能显示出比较好的效果.
音屏标签:

<audio src="media/Girl in the Mirror.mp3" autoplay="autoplay" loop="20" controls="true"/>

其中,src为引入的音屏文件的路径,可以是网络路径;autoplay属性表示页面加载后自动载入音屏文件进行播放;loop表示循环的次数.controls设为true表示显示音屏的画面,从而可以进行相应的播放设置.如果设置为false.则不显示音屏的画面,效果和背景音乐一样.
视屏标签:

<video src="media/vediotest.ogg"  controls="true" width="600" height="450" />

大体上和音屏标签用法一致,其中width与height分别是设置视屏画面的宽度和高度.
注意:
视屏标签和音屏标签不能并列使用.即不能出现如下的代码:

<!doctype html>
<html>
<body>
<audio src="Girl in the Mirror.mp3" autoplay="autoplay" loop="20" controls="true"/>
<video src="vediotest.ogg"  controls="true" width="600" height="450" />
</body>
</html>

这样的话,视屏标签不会出现.
但是可以这样使用:

<!doctype html>
<html>
<body>
<div>
<audio src="Girl in the Mirror.mp3" autoplay="autoplay" loop="20" controls="true"/>
</div>
<div>
<video src="vediotest.ogg"  controls="true" width="600" height="450" />
</div>
</body>
</html>

效果如下:

此文章带有附件,请前往http://www.iteye.com/topic/511577下载

发表回复

讨论话题排行