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

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

**一、object元素**

**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中会导致出错)

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

**3、使用objec的示例：**

最简单的示例：

**说明：**

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)、应该还有更多方法与属性，但自己未找到相关文档，后面再补全；

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

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

使用：

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

**三、video元素**

也是html5中新标签。

<table> 
 <tbody> 
  <tr> 
   <td><a title="HTML5 <video> autoplay 属性" href="http://www.w3school.com.cn/tags/att_video_autoplay.asp" rel="nofollow">autoplay</a></td> 
   <td>autoplay</td> 
   <td>如果出现该属性，则视频在就绪后马上播放。</td> 
  </tr> 
  <tr> 
   <td><a title="HTML5 <video> controls 属性" href="http://www.w3school.com.cn/tags/att_video_controls.asp" rel="nofollow">controls</a></td> 
   <td>controls</td> 
   <td>如果出现该属性，则向用户显示控件，比如播放按钮。</td> 
  </tr> 
  <tr> 
   <td><a title="HTML5 <video> height 属性" href="http://www.w3school.com.cn/tags/att_video_height.asp" rel="nofollow">height</a></td> 
   <td><em>pixels</em></td> 
   <td>设置视频播放器的高度。</td> 
  </tr> 
  <tr> 
   <td><a title="HTML5 <video> loop 属性" href="http://www.w3school.com.cn/tags/att_video_loop.asp" rel="nofollow">loop</a></td> 
   <td>loop</td> 
   <td>如果出现该属性，则当媒介文件完成播放后再次开始播放。</td> 
  </tr> 
  <tr> 
   <td><a title="HTML5 <video> muted 属性" href="http://www.w3school.com.cn/tags/att_video_muted.asp" rel="nofollow">muted</a></td> 
   <td>muted</td> 
   <td>规定视频的音频输出应该被静音。</td> 
  </tr> 
  <tr> 
   <td><a title="HTML5 <video> poster 属性" href="http://www.w3school.com.cn/tags/att_video_poster.asp" rel="nofollow">poster</a></td> 
   <td><em>URL</em></td> 
   <td>规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。</td> 
  </tr> 
  <tr> 
   <td><a title="HTML5 <video> preload 属性" href="http://www.w3school.com.cn/tags/att_video_preload.asp" rel="nofollow">preload</a></td> 
   <td>preload</td> 
   <td> <p>如果出现该属性，则视频在页面加载时进行加载，并预备播放。</p> <p>如果使用 "autoplay"，则忽略该属性。</p> </td> 
  </tr> 
  <tr> 
   <td><a title="HTML5 <video> src 属性" href="http://www.w3school.com.cn/tags/att_video_src.asp" rel="nofollow">src</a></td> 
   <td><em>url</em></td> 
   <td>要播放的视频的 URL。</td> 
  </tr> 
  <tr> 
   <td><a title="HTML5 <video> width 属性" href="http://www.w3school.com.cn/tags/att_video_width.asp" rel="nofollow">width</a></td> 
   <td><em>pixels</em></td> 
   <td>设置视频播放器的宽度。</td> 
  </tr> 
 </tbody> 
</table>

**注意：**区别video的autoplay属性与object中param的name="autostart"。

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

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

**注：**

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

**四、播放音频**

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

参考：MDN、W3School

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