html5新媒体播放器标签video、audio与embed、object
1. html5⾥的⼀些新的标签,看到⾥⾯object、embed、video、audio都可以添加视频或⾳频⽂件
2. embed是针对⾮IE的浏览器的媒体播放器
3. video是html5出的⼀种新标准,但并不是所有的浏览器都⽀持。video虽然号称可以⽀持三种媒体类型,但常⽤的只有mp4。
4. 像object,和embed是都可以⽤来播放视频和⾳频,⽽且他们展⽰效果基本上⼀样的,html frame
2、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嵌⼊内容的⽂件类型
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⽀持很多媒体类型⽐如图像、⾳频、视频、可以参考()列表,说明:embed标签是⼀个空标签,没有元素内容。在html中可以不关闭标签,⽽在xhtml中必须使⽤“/”关闭标签,如:<embed />
MIME(Multipurpose Internet Mail Extensions)多⽤途互联⽹邮件扩展类型。是设定某种扩展名的⽂件⽤⼀种应⽤程序来打开的⽅式类型,当该扩展名⽂件被访问的时候,浏览器会⾃动使⽤指定应⽤程序来打开。常⽤的MIME类型:
⽂件后缀Mime类型说明
.flv flv/flv-flash 在线播放
.html或.htm text/html 超⽂本标记语⾔⽂本
.rtf application/rtf RTF⽂本
.gif image/gif GIF图形
.jpeg或.jpg image/jpeg JPEG图形
.au audio/basic au声⾳⽂件
.mid或.midi audio/midi或audio/x-midi MIDI⾳乐⽂件
.ra或.ram或.rm audio/x-pn-realaudio RealAudio⾳乐⽂件
.mpg或.mpeg或.mp3 video/mpeg MPEG⽂件
.avi video/x-msvideo AVI⽂件
.gz application/x-gzip GZIP⽂件
.tar application/x-tar TAR⽂件
.exe application/octet-stream下载⽂件类型
.rmvb -realvideo 在线播放
.txt text/plain普通⽂本
.
mrp application/octet-stream MRP⽂件(国内普遍的⼿
机)
.ipa application/iphone-package-archive IPA⽂件(IPHONE)
.deb application/x-debian-package-archive DED⽂件(IPHONE)
APK⽂件(安卓系统)
.apk application/vnd.android.package-
archive
.cab application/vnd.cab-com-archive CAB⽂件(Windows Mobile)
.xap application/x-silverlight-app XAP⽂件(Windows Phone 7)
.sis application/vnd.symbian.install-
SIS⽂件(symbian平台)
archive
.jar application/java-archive JAR⽂件(JAVA平台⼿机通⽤
格式)
.jad text/vnd.sun.j2me.app-descriptor JAD⽂件(JAVA平台⼿机通⽤
格式)
SISX⽂件(symbian平台)
.sisx application/vnd.symbian.epoc/x-sisx-
app
3、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="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元素:
1<object width="400" height="40" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="fpdownload.macromedia/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>
播放⾳频可使⽤object、embed,此外html5也有audio标签与video相对应,且⽤法相同。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论