html5的影音功能
html5最大的突破是新增了video和audio元素，以及相关的API
进而赋予浏览器原生能力来播放视频和音频。不在依赖插件
为何要新增这两个元素？
答：1、为了播放视频和音频，各大浏览器自定义专用的元素，彼此的支持程度不同。audio和video元素题供了在网页上嵌入视频和音频的标准方式；
2、由于视频与音频的格式众多，所需的插件也不尽相同，但用户也不一定安装了正确的插件，导致无法播放；
3.对于必须依赖插件来播放的视频，浏览器的做法通常是在网页上保留一个区块给插件，然后就不去解析该区块，然而若有其他元素刚好也用到了该区块，可能会导致浏览器无法正确显示网页。
用法：
1、video元素和audio元素的用法和嵌入图片的img元素类似，也是通过src属性指定视频的来源。
2、若要在网页中自动播放视频，只需要加上autoplay属性；设置的loop属性，就会使视频或者音频循环播放；可以加上controls 属性来显示控制面板；可以设置width和height
3、poster 属性：在视频加载完毕之前或开始播放之前，默认会显示第一个画格，但该画格却不见得具有任何的意义；
4、preload属性：用来告诉用户代理程序，是否要在加载网页的同时将视频预先下载到缓冲区，方便用户在想看的时候可以立刻开始播放。无论它的值为多少，只要有autoplay属性，就会自动开始播放视频。
preload属性的值有一下三种：
none:这个值是告诉用户代理程序不要预先下载视频，除非用户有通过控制接口明确指示要播放视频
auto：由用户代理程序决定是否要预先下载视频。
5、width和height属性：来指定视频显示范围的宽度和高度
注意：
1、若没有指定width属性，将使用视频原本的宽度、poster属性指定之画面的宽度为300像素；
2、若没有height属性，将使用，，，，，，，，，，，，，，高度为150像素；
3、若视频的长宽比例和width、height属性所指定的长宽比例不同，将维持硬盘的长度比例，不会造成视频的变形；
4、audio元素的属性大多和video元素的相同。不过audio元素没有width、height属性，也没有poster属性。
影音文件的来源———–source元素
html5新增的source元素指定影音文件的uri与mime 类型。其属性如下
src=”uri”; 指定影音文件的相对或绝对地址
type=”content-type” ：指定影音文件的mime类型
1 2 3 4 5
| <video controls autoplay> <source src="bird.mp4" type="video/mp4"> <source src="bird.ogv" type="video/ogg"> </video>
|
注意：
source元素的type属性是很重要的，若遗漏type属性，浏览器就只好下载各个视频文件的部分内容，确认自己究竟支持哪个视频文件，若都不支持，不仅不会播放视频，还会拜拜浪费带宽。
上面的type属性的值 “video/mp4”和”video/ogg” 都只是指定了容器的类型，并没有说明容器里面的影音数据是采用的那种编码方式，以至于有些浏览器无法正确的判断出自己究竟能否播放该视频文件：比较好的做法是在type属性中加入codecs参数指定编解码器。不同的编解码器有不同的设置值。codecs参数的设置
1 2 3 4
| <video controls autoplay> <source src="bird.mp4" type='video/mp4;codecs="avc1.42E01E,mp4a.402"'> <source src="bird.ogv" type='video/ogg;codecs=theora,vorbis"'> </video>
|
video元素还有下列两个只读属性：
videoWidth=”n”：返回视频的原始宽度（n为像素数）
videoHeight=”n”：返回视频的原始高度（n为像素数）
嵌入资源文件——–embed元素
当希望浏览器播放的视频文件需要借助插件时，就可以使用embed元素。注意embed元素没有结束标签。
1
| <embed src="butterflies2.swf" type="application/x-shockwave-flash" width="400" height="400">
|
嵌入对象———object元素
object元素在html文件中嵌入图片、音频、QuickTime视频、ActiveX Controls、Java Applets、Flash动画或浏览器所支持的其他对象。
嵌入视频和音频的用法一样
1
| <object data="wildlife.wmv"></object>
|
object元素里面加上width和height属性，因此，浏览器画面会显示控制面板；若不要显示控制面板，而是要让用户一开启网页，就会自动播放音乐，那么可以将object元素的width和height属性指定为0
嵌入ActiveX Controls
注意：ActiveX Controls的classid是唯一的，不能随便填写，而且它有各自的参数，可以使用param元素的name和value属性指定参数的名称和值。如
1
| <param name="AutoStart" value="1">
|
1 2 3 4
| <object classid=""> <param name="" value=""> <param name="Filename" value="wildlife.wmv"> </object>
|
使用object来替代applet
1 2 3
| <applet code="bubbles.class" width="400" height="400"> ... </applet>
|
转为object
1 2 3
| <object classid="java:bubbles.class" codetype="application/java"width="400" height="400"> ... </object>
|
