第十六课：一些奇葩的元素节点object，video

object元素

object这个元素，现在前端很少用到，但是像flash，svg等奇葩元素，必须嵌套在object对象元素中。现代浏览器用video，canvas代替这些元素。

之前做过图表和地图的一些应用，像highchart,e-chart，这些图表插件，基本上是使用svg元素（嵌套在object元素中）生成的，可见它的作用还是不容忽视的。IE7以及以下版本浏览器使用的是vml。

在HTML5的video标签出来之前，我们基本上是通过object,embed,applet这三个标签来加载视频或其他多媒体资源的。

applet基本上被淘汰了，我在上学期间，研究的项目中，就用applet来截屏实现屏幕共享的功能。这个applet是java的东西，跨平台。好像是因为安全性问题，加上速度慢，消耗资源大，慢慢就被淘汰了。

如果你只是想插入flash视频，不进行js交互，embed标签就足矣。embed标签现在已经变成HTML5规范了。<embed> 标签定义嵌入的内容，比如插件。

embed元素用于在html文档中插入符合网景插件应用程序编程接口规范的插件。大家都知道当时的IE牛B的很，可不会使用别人的规范，他要的是垄断，因此，使用ActiveX替代了网景插件应用程序编程接口规范。ActiveX主要的技术是组件对象模型（COM），使用object标签加载COM组件。大家都知道IE7以及以下版本的ajax对象使用的就是COM组件。由于IE7以及以下版本的垃圾回收机制使用的是引用机制，所以很容易造成内存泄露。为了加载COM，微软为objec标签添加了两个属性：classid和codebase。

主流的浏览器，包括IE都支持object，embed标签，只是每个浏览器支持的程度不一样，支持的功能不一样。因此在写兼容性的其他资源或者插件嵌入时，支持object的就使用object嵌入，不支持的就使用embed嵌入。

classid就是这个com组件在系统中注册的一个ID值，有了这个ID值系统才能找到这个COM组件对应的DLL文件。

codebase是一个url，用来下载和更新组件用的。比如，浏览某个网页时， 发现你的机器上没有安装这个组件，IE（有些浏览器不支持这个功能，需要手动下载）就会去codebase指示的这个url下载组件，有了新版本也会提示你安装新版本。

object使用有几个要注意的点：

（1）它必须使用innerHTML或document.write()等手段动态创建。通过document.createElement这个标准API创建，无法加载我们的资源。

（2）创建param（object的子元素，用来加载资源的，object是整个的父元素，相当于html）时，必须指定name属性，否则param创建不成功。

比如：div.innerHTML = "<object><param></object>";alert(div.innerHTML)  //  <OBJECT></OBJECT>

div.innerHTML = "<object><param name=test></object>";alert(div.innerHTML)  //  <OBJECT><PARAM NAME="test" VALUE=""></OBJECT>

（3）IE8以及以下版本浏览器用getElementsByTagName("*")，无法取到param元素。只能通过getElementsByTagName("param")

（4）在Chrome中，如果object元素前面有一个元素有background-image样式，则该object不显示，刷新几次会出现该现象。可以用embed标签代替object解决。

（5）IE下的object标签的onerror事件没什么用，即便加载错误，它还是会触发onload回调。

 video元素

video与canvas是HTML5中最重要的两个标签，它打破了Flash对视频与图形处理的垄断。由于苹果公司的ios平台iphone不支持Flash，因此HTML5发展的更快了。

HTML5引入一个视频：

<video src="my.mp4" controls autoplay width="300" height="210"></video>

因为我们的视频存在各种各样的格式，如avi,rm,rmvb,mp4等，就需要对应不同的解码器来处理。每个浏览器自带的解码器不一样，所以每个浏览器支持的视频格式不一样。为了实现代码的可兼容性，引入了source标签，用它来链接不同的格式的视频文件。

比如：

<video id="video" controls preload="none" poster="http://poster.png">

　　<source id="mp4" src="http://trailer.mp4" type="video/mp4">

　　<source id="webm" src="http://trailer.webm" type="video/webm">

　　<p>your user agent does not support the HTML5 video element.</p>

</video>

浏览器会自行监测支持哪种视频格式的解码器，然后相应的播放，如果都不支持，将会显示p元素里面的字。

此外，视频上面的字幕，我们可以用trace标签实现，因此HTML5视频播放，实际使用的标签不止一个。

由于IE6-IE8不支持video，因此还需要object标签加载flash播放器。

vidoe标签里面有很多属性，我主要讲一下几个不常见的：

poster:用户指定一张图片，比如预览图。在当前视频正在加载或者视频地址错误时，显示。

preload:有三个选值：auto，当页面加载后，载入整个视频。metadata，当页面加载后，载入元数据（视频的总长度，第一帧画面）。none，当页面加载后，不载入视频。假如你指定了autoplay属性，就会忽略此属性，因为autoplay属性，会让浏览器当页面加载后，就会播放视频。

crossorigin:如果视频文件是在不同域获得服务，就涉及到跨域问题。此属性可以播放跨域的资源。video，audio，img都可以跨域播放。

canPlayType方法：检测浏览器是否支持此种视频类型。它并不返回boolean，而是返回以下三种值：probably，浏览器确认支持你传入的视频格式。maybe，浏览器或者支持你的视频格式。""空字符串，你的浏览器确认不能支持你传入的视频格式。

现在的浏览器主要围绕三种格式混战：

（1）MP4：使用H264视频，AAC音频

（2）WebM:使用VP8视频，Vorbis音频

（3）Ogg:使用Theora视频和Vorbis音频

MP4，H264视频编解码器以及AAC音频编解码器都是MPEG专利的专有格式，不是免费的。我在研究Flex时有了解过这个东西，主要用在Flash上，效果还不错，但是这种收费的东西不会长久的。

WebM是谷歌为了推动HTML5的发展，把它自己家的编解码格式开源，真是一家伟大的公司。我们在生成录制文件的时候，一般会生成这种格式的视频文件，直接在chrome浏览器中可以进行播放。这种格式在谷歌公司的推动下，我相信未来会有更大的份额。

Ogg是一种很小的编解码格式，它生成的文件，同样的时间长度，但是文件的大小比其他的格式小10倍，甚至更大。但是可能在音质和视频质量需求更高的环境下，会使用的比较少。

综上所述，如果我们需要在我们的网页嵌入一段视频，我们可以使用source标签引入这三种格式，同时与object标签的flash播放器一起使用，兼容低版本IE浏览器。

还有一点要注意的：视频的全屏和取消全屏操作，需要在事件回调中才有效。比如：点击按钮，然后在回调方法中，调用video.requestFullscroll()，浏览器才会全屏视频。

兼容性：在ipad上，video的菜单没有音量控制条，你也无法通过volume属性来调节它，只能通过你的ipad硬件按钮+，-，来控制音量。

加油！