html中音频和视频

HTML5音频中的新元素标签

1. src：音频文件路径。
2. autobuffer：设置是否在页面加载时自动缓冲音频。
3. autoplay：设置音频是否自动播放。
4. loop：设置音频是否要循环播放。
5. controls：属性供添加播放、暂停和音量控件。

这些属性和<video>元素标签的属性很类似

如何工作（同样，<audio> 与 </audio> 之间插入的内容是供不支持 audio 元素的浏览器显示的）

<audio controls="controls">

   <source src="video/You Are My Everything.mp3" type="audio/mp3"></source>
   您的浏览器不支持此音频播放!
</audio>

常用的控制函数

1. load()：加载音频、视频软件
2. play()：加载并播放音频、视频文件或重新播放暂停的的音频、视频
3. pause()：暂停出于播放状态的音频、视频文件
4. canPlayType(obj)：测试是否支持给定的Mini类型的文件

只读的媒体属性

1. duration获取媒体文件的播放时长，以s为单位，如果无法获取，则为NaN
2. paused如果媒体文件被暂停，则返回true，否则返回false
3. ended如果媒体文件播放完毕，则返回true
4. startTime返回起始播放时间
5. error返回错误代码
6. currentSrc以字符串形式返回正在播放或已加载的文件

可脚本控制的属性值

1. autoplay：自动播放已经加载的的媒体文件
2. loop为true：的时候则设定为自动播放
3. currentTime：以s为单位返回从开始播放到目前所花的时间
4. controls：显示或者隐藏用户控制界面
5. volume：音量值,从0.0至1.0之间
6. muted：设置是否静音
7. autobuffer：是否进行缓冲加载

HTML5视频中的新元素标签

现在如果要在页面中使用video标签，需要考虑三种情况，支持Ogg Theora或者VP8（如果这玩意儿没出事的话）的（Opera、Mozilla、Chrome），支持H.264的（Safari、IE 9、Chrome），都不支持的（IE6、7、8）。好吧，现在让我们从技术层面来认识HTML 5的视频，包括video标签的使用，视频对象可以用到的媒介属性和方法，以及媒介事件。

Video标签的使用

Video标签含有src、poster、preload、autoplay、loop、controls、width、height等几个属性， 以及一个内部使用的标签<source>。Video标签内除了可以包含<source>标签外，还可以包含当指定的视频都不能 播放时，返回的内容。

(1) src属性和poster属性

你能想象src属性是用来干啥的。跟<img>标签的一样，这个属性用于指定视频的地址。而poster属性用于指定一张图片，在当前视频数据无效时显示（预览图）。视频数据无效可能是视频正在加载，可能是视频地址错误等等。

<video width="658" height="444" src="video/郁金香.mp4" poster="img.jpg" autoplay="autoplay"></video>

 

(2) preload属性

这个属性也能通过名字了解用处，此属性用于定义视频是否预加载。属性有三个可选择的值：none、metadata、auto。如果不使用此属性，默认为auto。

<video width="658" height="444" src="video/郁金香.mp4" poster="img.jpg" autoplay="autoplay" preload="none"></video>

 

None：不进行预加载。使用此属性值，可能是页面制作者认为用户不期望此视频，或者减少HTTP请求。

Metadata：部分预加载。使用此属性值，代表页面制作者认为用户不期望此视频，但为用户提供一些元数据（包括尺寸，第一帧，曲目列表，持续时间等等）。

Auto：全部预加载。

(3) autoplay属性

又是一个看名字知道用处的属性。Autoplay属性用于设置视频是否自动播放，是一个布尔属性。当出现时，表示自动播放，去掉是表示不自动播放。

<video width="658" height="444" src="video/郁金香.mp4" poster="img.jpg" autoplay="autoplay" preload="none"></video>

 

注意，HTML中布尔属性的值不是true和false。正确的用法是，在标签中使用此属性表示true，此时属性要么没有值，要么其值恒等于他的 名字 （此处，自动播放为<video autoplay />或者<video autoplay=”autoplay” />）；而在标签中不使用此属性表示false（此处不进行自动播放为<video />）。

(4) loop属性

<video width="658" height="444" src="video/郁金香.mp4" poster="img.jpg" autoplay="autoplay" preload="none" loop="loop"></video>

 

一目了然，loop属性用于指定视频是否循环播放，同样是一个布尔属性。

(5) controls属性

<video width="658" height="444" src="video/郁金香.mp4" poster="img.jpg" autoplay="autoplay" preload="none" controls="controls"></video>

 

Controls属性用于向浏览器指明页面制作者没有使用脚本生成播放控制器，需要浏览器启用本身的播放控制栏。

控制栏须包括播放暂停控制，播放进度控制，音量控制等等。

每个浏览器默认的播放控制栏在界面上不一样。由于我浏览器的诡异问题，Firefox和Safari的Video标签不正常，所以这两个只能在网上找截图了。

(6) width属性和height属性

属于标签的通用属性了，这个不用多说。

(7) source标签

 

Source标签用于给媒体（因为audio标签同样可以包含此标签，所以这儿用媒体，而不是视频）指定多个可选择的（浏览器最终只能选一个）文件地址，且只能在媒体标签没有使用src属性时使用。

浏览器按source标签的顺序检测标签指定的视频是否能够播放（可能是视频格式不支持，视频不存在等等），如果不能播放，换下一个。此方法多用于兼容不同的浏览器。Source标签本身不代表任何含义，不能单独出现。

此标签包含src、type、media三个属性。

src属性：用于指定媒体的地址，和video标签的一样。

Type属性：用于说明src属性指定媒体的类型，帮助浏览器在获取媒体前判断是否支持此类别的媒体格式。

Media属性：用于说明媒体在何种媒介中使用，不设置时默认值为all，表示支持所有媒介。你想到<style>标签的media属性了么？一样一样一样的。

(8) 一个完整的例子

 

<video width="658" height="444" poster="img.jpg" autoplay="autoplay" preload="none" controls="controls">
   <source src="video/郁金香.mp4" ></source>
</video>

这段代码在页面中定义了一个视频，此视频的预览图为poster的属性值，显示浏览器的默认媒体控制栏，预加载视频的元数据，循环播放，宽度为900像素，高度为240像素。

第一选择视频地址为第一个source标签的src属性值，视频类别为Ogg视频，视频编码译码器为Theora，音频编码译码器为Vorbis， 播放媒 介为显示器；

第二选择视频地址不再累述。如果你还要兼容IE的话，可以在最后一个source标签后再加上Flash播放器的标签集，或者使用一点 JavaScript代码。