六狼论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

新浪微博账号登陆

只需一步,快速开始

搜索
查看: 321|回复: 0

HTML5多媒体初探

[复制链接]

升级  42.67%

34

主题

34

主题

34

主题

秀才

Rank: 2

积分
114
 楼主| 发表于 2013-1-29 13:55:38 | 显示全部楼层 |阅读模式
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>
效果如下:

您需要登录后才可以回帖 登录 | 立即注册 新浪微博账号登陆

本版积分规则

快速回复 返回顶部 返回列表