html5新增audio标签使web开发人员可以轻松的在网页内部加入音频,而video视频标签则可以加入视频文件。
这种方法可以在qq邮件中插入媒体。
audio音频标签
在页面中加入audio音频:
audio标签新增属性:
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 如果出现该属性,则音频在就绪后马上播放。 |
controls | controls | 如果出现该属性,则向用户显示控件,比如播放按钮。 |
loop | loop | 如果出现该属性,则每当音频结束时重新开始播放。 |
preload | preload | 如果出现该属性,则音频在页面加载时进行加载,并预备播放。如果使用 “autoplay”,则忽略该属性。 |
src | url | 要播放的音频的 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标签新增属性:
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 如果出现该属性,则视频在就绪后马上播放。 |
controls | controls | 如果出现该属性,则向用户显示控件,比如播放按钮。 |
height | pixels | 设置视频播放器的高度。 |
loop | loop | 如果出现该属性,则当媒介文件完成播放后再次开始播放。 |
preload | preload | 如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 “autoplay”,则忽略该属性。 |
src | url | 要播放的视频的 URL。 |
width | pixels | 设置视频播放器的宽度。 |
HTML5新增的video视频标签的出现大大提升了用户体验。
各浏览器Html5 Video支持的影音格式:
浏览器 | 影音格式 | Ogg Theora | MP4(H.264) | WebM |
---|---|---|---|
Microsoft Internet Explorer9 | ╳ | ○ | ╳ |
Mozilla Firefox5+ | ○ | ╳ | ○ |
Google Chrome13+ | ○ | ○ | ○ |
Apple Safari5+ | ╳ | ○ | ╳ |
Opera11+ | ○ | ╳ | ○ |
最简单的方法,就只要备备好Mp4与Ogv二种影音格式就可以了
主流浏览器支持video标签
方法很简单,只要调用一段js,就可以让主流浏览器实现video标签的视频播放。
此项目已经放到Google code上,您可以点击这里查看。
使用方法:
要想让主流浏览器都支持HTML5标签,使用非常简单,只要链接一个js文件就可以了。所以,只要您的页面上(头部或底部)有这么段代码:
就可以了。
对于HTML部分,使用类似下面: