首页 > 代码库 > 第十六课:一些奇葩的元素节点object,video

第十六课:一些奇葩的元素节点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="http://www.mamicode.com/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硬件按钮+,-,来控制音量。

 

 

加油!

第十六课:一些奇葩的元素节点object,video