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

- 日理万妓 2022-10-01 00:58 311阅读 0赞

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


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


HTML5中仍保留：

data：

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

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


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

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

说明：

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

(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引用的播放器有关，自己硬是没找到相关文档。列几个常用的值吧：

  1. <param name="url" value=""/>
  2. <param name="src" value=""/>
  3. <param name="filename" value=""/> IE中 必须设置
  4. <param name="autostart" value="true|false"/> 
  5. <param name="allowfullscreen" value="true|false"/>
  6. <param name="wmode" value="transparent"/>

3、使用objec的示例：

最简单的示例：

  1. <object id="" width="" height="" style="" type="data所引用文件的MIME 类型名" data="引用文件的url">
  2. <param name="filename" value="带后缀的文件名"/>
  3. </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()：停止，再次点播放时重新开始。

示例：

  1. <object WIDTH="550" HEIGHT="400" id="myMovieId" data="乐秀视频第2部.mp4" type="video/mp4"> 
  2.     <param name="filename" value="乐秀视频第2部.mp4">
  3. </object> 
  4. <button οnclick="pauseVideo()">暂停视频</button>
  5. <script type="text/javascript">
  6.     function pauseVideo() {
  8.         var player=document.getElementById("myMovieId");
  9.         alert(player.playState);
  10.         if(player.playState==2)
  11.             player.pause();
  12.         else
  13.             player.play();
  14.     }
  15. </script>

说明：

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

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

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

使用：

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

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

  1. <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">
  2. <param name="SRC" value="bookmark.swf">
  3. <embed src="bookmark.swf" width="400" height="40"></embed>
  4. </object>

三、video元素

也是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 网站。

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

  1. <video width="320" height="240" controls="controls">
  2.   <source src="movie.mp4" type="video/mp4" />
  3.   <source src="movie.ogg" type="video/ogg" />
  4.   <source src="movie.webm" type="video/webm" />
  5.   <object data="movie.mp4" width="320" height="240">
  6.     <embed src="movie.swf" width="320" height="240" />
  7.   </object>
  8. </video>

注：

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

四、播放音频

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

参考：MDN、W3School

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

发表评论

表情：
评论列表 （有 0 条评论，311人围观）

还没有评论，来说两句吧...

相关阅读