3年前 (2015-02-09)  分享发现 |   抢沙发  1,561 次围观 
文章评分 0 次,平均分 0.0

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.开放式标签用法 控制尺寸
 

除特别注明外,本站所有文章均为JUST FOR FUN原创,转载请注明出处来自http://im.acirno.com/114.html

关于
在哪都是个打酱油的(+﹏+)

发表评论

表情 格式

暂无评论

切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

切换登录

注册

扫一扫二维码分享