您当前的位置:首页 > 网站建设笔记 >

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

0

最重要的两个HTML5新元素就是<audio>和<video>,分别允许你可以给站点添加音频和视频内容,就像使用<img>添加图片一样容易。这两个元素都非常清晰易懂。这里有一个<video>示例,如下所示:

<video controls poster="" width="640" height="360">
	<source src="uploadfile/IMG_1706.webm" type="video/webm">
	<source src="uploadfile/IMG_1706.mp4" type="video/mp4">
</video>

<video>元素包含:
controls属性:告诉浏览器给视频包含默认控件。若不包含此属性,你可以通过使用媒体元素API来创建你自己的控件。
poster属性:定义了在视频播放前体现视频内容的一张封面图片的位置,若不包含此属性,则默认显示视频第一帧。
width和height属性:和<img>的一样,它们用于定义视频的高度和宽度,但如果你定义的尺寸不同于视频的尺寸,视频不会改变大小,而会四周留空。

<source>的属性指向你想要播放的视频文件,你也可以给<video>元素添加一个src属性来指向你想播放的一个视频文件,但在当前这不是一个好主意,因为不同的浏览器支持不同的视频格式(那些无聊的理由这里就不多说了,如果有兴趣请点击查看:HTML5与H.264 WebM Ogg等视频格式)。IE和Safari倾向MP4,而Opera、Firefox和Chrome倾向WebM和Ogg。因此你需要两个<source>元素来指向不同格式的文件,然后浏览器会载入它能识别的那一个。你无需包含type属性,但这是个好习惯,因为这将告诉浏览器每个元素所指向的视频的类型以便其立即选择想要的那一个。如果没有包含type属性,浏览器会尝试下载每个文件的少量字节来判断它能识别哪个,但这很浪费时间和效率。

注意:要轻松地转换各种视频格式,Miro Video Convert是一个不错而且免费的选择。

<video>和<audio>的工作方式相似,但要注意<audio>不包含与其不相关的属性,比如poster、width和height。下面是一个<audio>示例:

<audio controls>
	<source src="uploadfile/Lonely-Akon.mp3" type="audio/mp3">
	<source src="uploadfile/Lonely-Akon.ogg" type="audio/ogg">
</audio>

这个音频例子的效果如下图所示:

建站咨询

在线咨询真诚为您提供专业解答服务

咨询热线

137 1731 25507×24小时服务热线

微信交流

二维码终于等到你,还好我没放弃
返回顶部