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

html5新增audio标签使web开发人员可以轻松的在网页内部加入音频,而video视频标签则可以加入视频文件。

audio音频标签

在页面中加入audio音频:

<audio src="horse.ogg" controls="controls" autoplay="autoplay" loop="loop">您的浏览器不支持audio</audio>


audio标签新增属性:

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

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

video视频标签

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

<video src="movie.ogg" controls="controls"></video>

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教程:audio音频标签和video视频标签》上有 3 条评论

  1. Whoa! Dieser Blog sieht genau gerade wie mein alter!
    Es ist auf inem vollständig unterschiedlichen Thema , aber es hat ziemlich die gleiche Layout und Design. Ausgezeichnete Waahl derr Farben!

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>