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

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

<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();elseplayer.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中新标签。

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

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

html —— 媒体播放object、embed、vedio等元素相关推荐

教程:媒体播放器SKIN制作全攻略[原创]
因为不太知道怎样的教程比较合用,所以我想把这个教程做成互动式的,一部分一部分地放上来,大家可以对这篇文档提出自己的建议和要求,我根据大家的需求来改,目前拟定的目录如下: 微软媒体播放器SKIN制作教程 ...
Bye Bye Embed-再见了Embed，符合web标准的媒体播放器代码
由于Embed标签是Netscape的私有财产,故一直未被W3C认可,对于各种媒体文件使用Embed标签是非标准的,如何改变?Elizabeth Castro的 Bye Bye Embed 一文对于各 ...
VLC媒体播放器Web插件详细说明
原文地址:https://wiki.videolan.org/Documentation:WebPlugin/ 简介:使用视频构建网页该VLC媒体播放器 webplugins是原生浏览器插件,类似于 ...
【翻】【英汉对照】【完整官方参考】Windows媒体播放器11 SDK 播放器对象模型（三）
用于脚本语言的播放器对象模型 ActiveX 采用拥有编程功能的对象概念.Windows 媒体播放器使用一些对象来划分控件提供的功能. 根对象为 Player 对象,其他对象都通过特定的属性与 Pla ...
Android媒体播放框架MediaSessionCompat介绍实践
前言最近维护项目的时候遇到了MediaSessionCompat框架的音乐播放器,简单搜索记录一下这套实现播放器的结构吧. MediaSession框架简介我们先来看看如何设计一款音乐播放App的 ...
WPF 媒体播放器（MediaElement）使用实例（转）
在WPF 中可以使用MediaElement 为应用程序添加媒体播放控件,以完成播放音频.视频功能.由于MediaElement 属于UIElement,所以它同时也支持鼠标及键盘的操作.本篇将使用M ...
Qt6实战教程：媒体播放器示例
Media Player示例使用Microsoft Media Player ActiveX控件来实现功能正常的媒体播放器应用程序. 开始前先介绍一下我们的Qt商业控件: QtitanRibbon| ...
Android 媒体播放框架MediaSession分析与实践
版权声明:本文为博主原创文章,未经博主允许不得转载源码:AnliaLee/BauzMusic 大家要是看到有错误的地方或者有啥好的建议,欢迎留言评论前言最近一直在忙着学习和研究音乐播放器,发现介 ...
基于QT平台的手持媒体播放器项目实战视频教程下载
分享一套关于在QT平台的手持媒体播放器项目实战的视频教程,Qt是一个1991年由奇趣科技开发的跨平台C++图形用户界面应用程序开发框架. 它既可以开发GUI程式,也可用于开发非GUI程式,比如控制台工 ...

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

html —— 媒体播放object、embed、vedio等元素相关推荐

最新文章

热门文章