HTML5多媒体初探
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://dl.iteye.com/upload/attachment/166367/871700c7-b63a-3802-84f5-ff51ad5c173c.png
页:
[1]