1、嵌入音频和视频
对于音频片段,传统的递送方法是使用<object>或者<embed>标记符将片段嵌入到页面,而HTML5提供了<audio>标记符来做这件事
2、介绍<vedio>标记符
(1)一个简单的<video>标记符如下所示:
<video src="myvideo.ogv"></video>
根据网站访问者的需要,可以通过不同的属性和方法来使用<video>标记符,使其更加容易配置。
我们使用width和height属性来设置视频在网页上显示的宽度和高度,例如:
<video src="myvideo.ogv" width="320" height="240" ></video>
(2)controls属性决定是否在浏览器中显示默认的一系列播放控件,实际上,如果不适用controls属性,网页访问者除非重新转载整个网页,否则无法重播视频。
controls属性的例子如下所示:
<video src="myvideo.ogv" controls></video>
(3)preload 属性告诉浏览器,一旦遇到该元素,马上开始下载视频文件。
(4) loop属性告诉浏览器,视频播放完毕后马上重新播放,如下所示:
<video src="myvideo.ogv" loop></video>
(5)autoplay属性使得视频在网页上装载完毕后马上开始播放,
将前面的属性放在一起,就产生了实际应用中的视频因素:
<video src="myvideo.ogv" width="320" height="240" controls></video>
3、<embed>标记符:备用计划
如果访问者使用不支持HTML5的老版本浏览器,在这种情况下,他们不能通过<video>标记符看视频,我们可以通过<embed>标记符加入一些额外的元素,如下:
<embed src="myvideo.mp4" type="application/x-shockwave-flash" width="320" height="240" allowscriptaccess="always" allowfullscreen="true">
4、通过<audio>标记符播放音频
(1)和<video>标记符一样,<audio>标记符 支持多种源文件,由于没有通用的格式,需要多次编码音频文件来支持最广泛的听众。和<video>标记符一样,<audio>也支持像
controls、autoplay、loop、preload这样的属性。因此、<audio>标记符和<video>标记符的语法本质是一样的。
和视屏文件一样,也需要将音频流嵌入到Flash对象中,以满足老版本IE用户的需求。
(2)在老版本浏览器中播放音频
和视频一样,在老版本的浏览器中播放音频需要使用<embed>标记符中,当用在视频时,通常要用到两个属性,src和autostart。src配置音频文件的资源文件的位置。 autostart控制音频片段是否在网页上装载完毕后自动播放,
<audio autoplay loop>
<source src="myaudio.mp3">
<source src="myaudio.ogg">
<embed src="myaudio.mp3">
</audio>
在默认情况下,<embed>包含会自动播放。如果不想这么多,可以增加autostart=“false”属性标记符,如下所示:
<embed src=”myaudio.mp3" autostart="false">
另外一个常用的<embed>标记符的属性是loop,当设置loop属性为true或infinite时,音频文件片段播放完后会马上重播,这个属性也可以设置成false来表明音频应该仅重播 一次,然而在默认情况下,音频文件仅播放一次,因此略去loop属性和设置其为false效果是一样的