1. 首页
  2. SEO百科
  3. Web前端

html5新媒体播放器标签embed、object新手入门_标签使用说明

html5里的一些新的标签,看到里面object、embed、video、audio都可以添加视频或音频文件。其中embed是针对非IE的浏览器的媒体播放器,video是html5出的一种新标准,但并不是所有的浏览器都支持。video虽然号称可以支持三种媒体类型,但常用的只有mp4。像object,和embed是都可以用来播放视频和音频,而且他们展示效果基本

html5新媒体播放器标签embed、object新手入门

html5里的一些新的标签,看到里面object、embed、video、audio都可以添加视频或音频文件。

html5新媒体播放器标签embed、object新手入门_标签使用说明

其中embed是针对非IE的浏览器的媒体播放器,video是html5出的一种新标准,但并不是所有的浏览器都支持。video虽然号称可以支持三种媒体类型,但常用的只有mp4。像object,和embed是都可以用来播放视频和音频,而且他们展示效果基本上一样的。

embed

embed和object都是网页用的嵌入脚本,用来播放flash文件的,如果使用的是flash文件或者其他video标签不支持的格式。那么可以使用embed标签插入。embed标签只支持PC端,移动端无效,video标签移动和PC端均支持,如果你的视频文件是mp4格式的,那么推荐使用video标签,兼容PC端和移动端。

我们要在网页中正常显示flash内容,那么页面中必须要有指定flash路径的标签。也就是OBJECT和EMBED标签,embed标签是html5版本新增的标签,是使用来定义嵌入的内容(如插件、媒体等)

如果浏览器没安装没启用flash,那么浏览器会跳出一个提示框访问是否要自动安装flash player。

object和embed的区别:

是为了兼容不同浏览器,IE只支持对Object的解析;火狐,谷歌,Safari只支持对Embed的解析。注意:使用<object>+<embed>是为了更好的兼容性,如果场景允许,推荐使用<object>。

语法:

<embed src="/i/helloworld.swf" type="application/x-shockwave-flash" />

embed标签属性值:

标签属性设置说明             
src被嵌入内容的地址
type嵌入内容的文件类型MIME类型
autostart自动播放(boolean)
loop循环播放(boolean)
hidden控制面板是否显示(true,no)
starttime=mm:ss(分:秒)开始播放的时间
volume音量大小(0~100)
height、width容器属性
units该属性指定高和宽的单位为pixels或en
controls=console一般正常面板(多属性值)
name该属性给对象取名,以便其他对象利用
title=说明文字
palette=color|color表示嵌入的音频或视频文件的前景色和背景色,第一个值为前景色,第二个值为背景色,中间用 | 隔开。color可以是RGB色(RRGGBB)也可以是颜色名
align规定控制面板和当前行中的对象的对齐方式

embed支持很多媒体类型比如图像、音频、视频、可以参考文件类型(IANA MIME 类型)列表,说明:embed标签是一个空标签,没有元素内容。在html中可以不关闭标签,而在xhtml中必须使用“/”关闭标签,如:<embed />

MIME(Multipurpose Internet Mail Extensions)多用途互联网邮件扩展类型。是设定某种扩展名的文件用一种应用程序来打开的方式类型,当该扩展名文件被访问的时候,浏览器会自动使用指定应用程序来打开。

常用的MIME类型:

文件后缀Mime类型说明
.flvflv/flv-flash 在线播放
.html或.htm text/html 超文本标记语言文本
.rtf application/rtfRTF文本
.gif image/gifGIF图形
.jpeg或.jpg image/jpegJPEG图形
.auaudio/basic au声音文件
.mid或.midiaudio/midi或audio/x-midiMIDI音乐文件
.ra或.ram或.rm audio/x-pn-realaudioRealAudio音乐文件
.mpg或.mpeg或.mp3 video/mpegMPEG文件
.avi video/x-msvideoAVI文件
.gzapplication/x-gzipGZIP文件
.tarapplication/x-tar TAR文件
.exe application/octet-stream下载文件类型
.rmvb video/vnd.rn-realvideo 在线播放
.txt text/plain普通文本
.mrp application/octet-stream MRP文件(国内普遍的手机)
.ipaapplication/iphone-package-archiveIPA文件(IPHONE)
.deb application/x-debian-package-archiveDED文件(IPHONE)
.apkapplication/vnd.android.package-archive APK文件(安卓系统)
.cabapplication/vnd.cab-com-archive CAB文件(Windows Mobile)
.xapapplication/x-silverlight-app XAP文件(Windows Phone 7)
.sisapplication/vnd.symbian.install-archiveSIS文件(symbian平台)
.jar application/java-archiveJAR文件(JAVA平台手机通用格式)
.jadtext/vnd.sun.j2me.app-descriptorJAD文件(JAVA平台手机通用格式)
.sisx application/vnd.symbian.epoc/x-sisx-app SISX文件(symbian平台)

Object

object参数说明
param name标签是在这个播放插件中嵌入的一些功能和播放参数,比如(你可以抄下来): 

<param name="playcount" value="1"><!--控制重复次数: “x”为几重复播放几次; x=0,无限循环。--> 
<param name="autostart" value="0"><!--控制播放方式: x=1,打开网页自动播放; x=0,按播放键播放。--> 
<param name="clicktoplay" value="1"><!--控制播放开关: x=1,可鼠标点击控制播放或暂停状态; x=0,禁用此功能。--> 
<param name="displaysize" value="0"><!--控制播放画面: x=0,原始大小; x=1,一半大小; x=2,2倍大小。--> 
<param name="enablefullscreen controls" value="1"><!--控制切换全屏: x=1,允许切换为全屏; x=0,禁用此功能。--> 
<param name="showaudio controls" value="1"><!--控制音量: x=1,允许调节音量; x=0,禁止音量调节。--> 
<param name="enablecontext menu" value="1"><!--控制快捷菜单: x=1,允许使用右键菜单; x=0,禁用右键菜单。--> 
<param name="showdisplay" value="1"><!--控制版权信息: x=1,显示电影及作者信息;x=0,不显示相关信息--> 
<param NAME="AutoStart" VALUE="-1"><!--是否自动播放--> 
<param NAME="Balance" VALUE="0"><!--调整左右声道平衡,同上面旧播放器代码--> 
<param name="enabled" value="-1"><!--播放器是否可人为控制--> 
<param NAME="EnableContextMenu" VALUE="-1"><!--是否启用上下文菜单--> 
<param NAME="url" VALUE="http://1.wma"> <!--播放的文件地址--><param NAME="PlayCount" VALUE="1"><!--播放次数控制,为整数--> 
<param name="rate" value="1"><!--播放速率控制,1为正常,允许小数,1.0-2.0--> 
<param name="currentPosition" value="0"><!--控件设置:当前位置--> 
<param name="currentMarker" value="0"><!--控件设置:当前标记--> 
<param name="defaultFrame" value=""><!--显示默认框架--> 
<param name="invokeURLs" value="0"><!--脚本命令设置:是否调用URL--> 
<param name="baseURL" value=""><!--脚本命令设置:被调用的URL--> 
<param name="stretchToFit" value="0"><!--是否按比例伸展--> 
<param name="volume" value="50"><!--默认声音大小0%-100%,50则为50%--> 
<param name="mute" value="0"><!--是否静音-- 
<param name="uiMode" value="mini"><!--播放器显示模式:Full显示全部;mini最简化;None不显示播放控制,只显示视频窗口;invisible全部不显示--><param name="windowlessVideo" value="0"><!--如果是0可以允许全屏,否则只能在窗口中查看--> 
<param name="fullScreen" value="0"><!--开始播放是否自动全屏--> 
<param name="enableErrorDialogs" value="-1"><!--是否启用错误提示报告--> 
<param name="SAMIStyle" value><!--SAMI样式--> 
<param name="SAMIFilename" value><!--字幕ID-->

使用 object 和 embed 标签来嵌入,细心的会发现,object 的很多参数和 embed 里面的很多属性是重复的,为什么这样做?为了浏览器兼容性,有的浏览器支持 object,有的支持 embed,这也是为什么要修改 Flash 的参数时两个地方都要改的原因。这种方法是 Macromedia 一直以来的官方方法,最大限度的保证了 Flash 的功能,没有兼容性问题。
现阶段用 JS 嵌入 Flash 是最完美的方法.

对于不支持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>

播放音频可使用object、embed,此外html5也有audio标签与video相对应,且用法相同。

海计划公众号