一、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 οnclick="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>
也是html5中新标签。
autoplay | autoplay | 如果出现该属性,则视频在就绪后马上播放。 |
controls | controls | 如果出现该属性,则向用户显示控件,比如播放按钮。 |
height | pixels | 设置视频播放器的高度。 |
loop | loop | 如果出现该属性,则当媒介文件完成播放后再次开始播放。 |
muted | muted | 规定视频的音频输出应该被静音。 |
poster | URL | 规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。 |
preload | preload | 如果出现该属性,则视频在页面加载时进行加载,并预备播放。 如果使用 "autoplay",则忽略该属性。 |
src | url | 要播放的视频的 URL。 |
width | pixels | 设置视频播放器的宽度。 |
注意:区别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
上面都只是实现最基础的模仿功能,实际上默认的组件外观比较难看,后面有空再细细整理各元素对象的所有属性,并实现一个类似爱奇艺播放器的界面。