html5教程:audio音频标签和video视频标

html5新增audio标签使web开发人员可以轻松的在网页内部加入音频,而video视频标签则可以加入视频文件。
这种方法可以在qq邮件中插入媒体。

audio音频标签

在页面中加入audio音频:


audio标签新增属性:

属性描述
autoplayautoplay如果出现该属性,则音频在就绪后马上播放。
controlscontrols如果出现该属性,则向用户显示控件,比如播放按钮。
looploop如果出现该属性,则每当音频结束时重新开始播放。
preloadpreload如果出现该属性,则音频在页面加载时进行加载,并预备播放。如果使用 “autoplay”,则忽略该属性。
srcurl要播放的音频的 URL。

注意:火狐浏览器不支持loop属性。

video视频标签

HTML5新增video视频标签。在此之前网页没有显示视频的标准,所以浏览器必须加载插件来进行视频播放。HTML5视频标签video将改变浏览器必须加载插件的情况,进一步改善用户Web体验,使用户在轻松愉快的情况下观看视频。

HTML5中的video标签支持3种常用的视频格式:
1、Ogg = 带有Theora 视频编码和Vorbis 音频编码的 Ogg 文件;
2、MPEG4 = 带有H.264 视频编码和AAC 音频编码的MPEG 4 文件;
3、WebM = 带有VP8 视频编码和Vorbis 音频编码的WebM 文件。
现在主流浏览器对视频格式的支持都有所不同,相信HTML5正式发布的那天video会支持更多的视频格式,给开发者和用户带来不少的好处。
video标签新增属性:

属性描述
autoplayautoplay如果出现该属性,则视频在就绪后马上播放。
controlscontrols如果出现该属性,则向用户显示控件,比如播放按钮。
heightpixels设置视频播放器的高度。
looploop如果出现该属性,则当媒介文件完成播放后再次开始播放。
preloadpreload如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 “autoplay”,则忽略该属性。
srcurl要播放的视频的 URL。
widthpixels设置视频播放器的宽度。

HTML5新增的video视频标签的出现大大提升了用户体验。
各浏览器Html5 Video支持的影音格式:

浏览器 | 影音格式Ogg TheoraMP4(H.264)WebM
Microsoft Internet Explorer9
Mozilla Firefox5+
Google Chrome13+
Apple Safari5+
Opera11+

最简单的方法,就只要备备好Mp4与Ogv二种影音格式就可以了

主流浏览器支持video标签

方法很简单,只要调用一段js,就可以让主流浏览器实现video标签的视频播放。
此项目已经放到Google code上,您可以点击这里查看。
使用方法:
要想让主流浏览器都支持HTML5标签,使用非常简单,只要链接一个js文件就可以了。所以,只要您的页面上(头部或底部)有这么段代码:

 

就可以了。
对于HTML部分,使用类似下面:

3.开放式标签用法 控制尺寸
内容投诉
「点点赞赏,手留余香」

    还没有人赞赏,快来当第一个赞赏的人吧!
0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论
'); })();