html —— 媒体播放object、embed、vedio等元素

一、object元素

<object> 标签用于包含对象，比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash。

1、object标签属性：

 HTML5 中已废弃：

archive ：
用来指名对象资源列表的以空格分隔的 URI 列表。
border ：
元素周围的边框的宽度，单位为像素。
classid ：
对象实现的 URI，可以同时与 data 属性使用，或者使用 data 属性替代。
codebase ：
解析 classid，data 或者 archive 中定义的相对路径的根路径，如果没有定义，默认为当前文档的 base URI。
codetype ：
classid 定义的 data 的内容类型(MIME 类型)。

declare ：
取值为布尔的属性可以设置这个元素为仅声明的格式。对象必须被随后的 <object> 元素实例化。在 HTML5 中，完整的重复 <object> 元素，可以重用元素。

standby：
对象的实现和数据加载过程中，浏览器可以显示的信息。
tabindex ：
当前元素在文档 Tab 导航中的顺序。

HTML5中仍保留：

data：

一个合法的 URL 作为资源的地址，，需要为 data 和 type 中至少一个设置值。

height：
资源显示的高度，单位是 CSS 像素。
name：
浏览上下文名称（HTML5），或者控件名称（HTML 4）。

type
data 指定的资源的 MIME 类型，需要为 data 和 type 中至少一个设置值。
usemap
指向一个 <map> 元素的 hash-name；格式为 ‘#’ 加 map 元素 name 元素的值。
width
资源显示的宽度，单位是 CSS 像素。

HTML5中新增：
form：
对象元素关联的 form 元素（属于的 form）。 取值必须是同一文档下的一个 <form> 元素的 ID。

说明：

(1)、由属性解释可知，如果object引入的是对象，则classid即是对象的url，若是媒体文件，则classid也是文件的url，故可将媒体文件视为对象，此时classid即与data属性的作用相同。经实践，下面的用法也是可以的：(仅在IE 中测试可行，Opera中会导致出错)

<object WIDTH="550" HEIGHT="400" id="myMovieId" classid="乐秀视频第2部.mp4" >     <param name="filename" value="乐秀视频第2部.mp4"></object> 

(2)、还有一条，需要为data和type中至少一个设置值。上面的例子中相当于为data设置了值(仅IE)，所以不用再写。通常设置data。

(3)、经实践，用object播放媒体时，无论设置data还是classid，在IE中播放都必须添加name="filename"的param元素，否则无法播放。
综合考虑，用object播放媒体时，设置object元素的data属性与param元素的name="filename"的value属性。

2、object与param标签

大家都说param标签可设置object的运行时状态，但具体param的name有哪些取值，估计与object引用的播放器有关，自己硬是没找到相关文档。列几个常用的值吧：

<param name="url" value=""/><param name="src" value=""/><param name="filename" value=""/>IE中 必须设置<param name="autostart" value="true|false"/><param name="allowfullscreen" value="true|false"/><param name="wmode" value="transparent"/> 

3、使用objec的示例：

最简单的示例：

<object id="" width="" height="" style="" type="data所引用文件的MIME 类型名" data="引用文件的url"><param name="filename" value="带后缀的文件名"/></object>

说明：

1、object标签的classid属性值即所引用组件(此处即播放器)在系统中注册的CLSID，浏览器通过此clsid找到组件并运行。此CLSID也可以是服务器上注册的组件的CLSID。CLSID需要在系统注册表中查找。

2、对于播放媒体，若使用object，则其data属性是必须的。此外，IE浏览器还必须添加name="filename"的param元素才能正确播放媒体。

此外，感觉name为src与url及controller的param元素没起什么作用，能否正常播放只取决于object的data属性是否正确设置。

看了爱奇艺的视频播放的html，发现也是用的object元素，但不知它是如何实现自定义控制界面与各种事件的。

4、控制object播放媒体的暂停与播放

object元素对应对象的属性与方法：

属性：

playState：播放状态，0：未开始播放，1：暂停中，2：正在播放

方法：

play()：播放；

pause()：暂停，再次点播放时从当前位置继续播放；

stop()：停止，再次点播放时重新开始。

示例：

<object WIDTH="550" HEIGHT="400" id="myMovieId" data="乐秀视频第2部.mp4" type="video/mp4">     <param name="filename" value="乐秀视频第2部.mp4"></object> <button onclick="pauseVideo()">暂停视频</button><script type="text/javascript">    function pauseVideo() {                var player=document.getElementById("myMovieId");        alert(player.playState);        if(player.playState==2)            player.pause();        else            player.play();    }</script>

说明：

(1)、应该还有更多方法与属性，但自己未找到相关文档，后面再补全；

(2)、所列的几个属性与方法在Opera中提示未定义，可能是Opera对object支持较弱，也可能是自己的Opera中未安装flash插件的原因。

二、embed元素
embed标签是html5中新标签，几乎所有浏览器都支持。拥有width、height、src、type(src引用文件的MIME 类型)四个属性。

使用：

<embed src="movie.swf" height="200" width="200"/>

对于不支持object的浏览器，可以使用如下方式，浏览器将跳过object，识别embed元素：

<object width="400" height="40" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"><param name="SRC" value="bookmark.swf"><embed src="bookmark.swf" width="400" height="40"></embed></object>

三、video元素

也是html5中新标签。

autoplayautoplay如果出现该属性，则视频在就绪后马上播放。controlscontrols如果出现该属性，则向用户显示控件，比如播放按钮。heightpixels设置视频播放器的高度。looploop如果出现该属性，则当媒介文件完成播放后再次开始播放。mutedmuted规定视频的音频输出应该被静音。posterURL规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。preloadpreload

如果出现该属性，则视频在页面加载时进行加载，并预备播放。

如果使用 "autoplay"，则忽略该属性。

srcurl要播放的视频的 URL。widthpixels设置视频播放器的宽度。
注意：区别video的autoplay属性与object中param的name="autostart"。

对应的Video对象的事件查看MDN 网站。

为兼容所有设备所有浏览器，常用播放视频方法示例：

<video width="320" height="240" controls="controls">  <source src="movie.mp4" type="video/mp4" />  <source src="movie.ogg" type="video/ogg" />  <source src="movie.webm" type="video/webm" />  <object data="movie.mp4" width="320" height="240">    <embed src="movie.swf" width="320" height="240" />  </object></video>

注：

video与embed为html5元素，所以必须声明文档类型为html。

四、播放音频

同样可使用object、embed，此外html5也有audio标签与video相对应，且用法相同。

参考：MDN、W3School

上面都只是实现最基础的模仿功能，实际上默认的组件外观比较难看，后面有空再细细整理各元素对象的所有属性，并实现一个类似爱奇艺播放器的界面。