用HTML5 的方法为页面添加视频或音频

发布日期:2015-08-07 21:07:09

用HTML5 的方法为页面添加视频或音频

说实话,我发现在 HTML 4.01网页中添加视频或音频媒体完全是一种折磨。不是因为它很难,而是很麻烦。HTML5使这件事情变简单了。添加多媒体的语法和添加图片类似:

<video src="myVideo.ogg"></video>

对很多网页设计师来说简直如沐春风!不再需要向网页中引入一大堆代码,在 HTML5中只需要一个 <video></video> 标签(音频使用 <audio></audio> 标签)就能搞定这种吃力活。 还可以在开始标签和结束标签之间插入文字用以告知那些使用不兼容 HTML5浏览器的用户,此外还支持你一般都会追加的附加属性如 height 和 width 。我们把这些都加上:

<video src="video/myVideo.mp4" width="640" height="480">北京网站设计</video>

现在将上面这段代码插入我们的网页然后在 Safari 中查看,视频就会出现但没有播放控制栏。想要显示默认的播放控制栏则需要追加 controls 属性。我们还可以追加autoplay 属性(不建议——因为大家都讨厌自动播放的视频,这是常识) 。修改后的代码如下:

<video src="video/myVideo.mp4" width="640" height="480" controls autoplay>北京网页设计</video>

上面的代码所产生的效果如下图所示:

用HTML5 的方法为页面添加视频或音频

其余的属性还包括用来控制媒体预加载的 preload (HTML5 的早期尝鲜者应该注意

preload 替代了原先的 autobuffer ) ,用来重复播放视频的 loop ,以及用来定义视频缩略图的 poster (这个属性在视频播放延迟时非常有用) 。要使用某个属性,将其追加到标签中即可。下面的例子包含了刚才提到的所有属性:

<video src="video/myVideo.mp4" width="640" height="480" controls autoplay

preload="auto" loop poster="myVideoPoster.jpg">W北京网页设计</video>

  Copyright © 2010-2018 北京梦创义科技
公司地址:朝阳区紫芳路9号院广顺园2号楼2605A

联系我们| 关于我们| 网站地图| 北京网站建设| 北京网页设计