HTML 学习总结 9

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效果是一样的