html5新媒体播放器标签video、audio 与embed、object
<ol><li>html5里的一些新的标签,看到里面object、embed、video、audio都可以添加视频或音频文件</li>
<li>embed是针对非IE的浏览器的媒体播放器</li>
<li>video是html5出的一种新标准，但并不是所有的浏览器都支持。video虽然号称可以支持三种媒体类型，但常用的只有mp4。</li>
<li>像object,和embed是都可以用来播放视频和音频,而且他们展示效果基本上一样的,</li>
</ol>
<p> </p>
<p><span style="font-size: 16px"><strong>1、 video、audio可以看我的另一篇文章https://www.cnblogs.com/jing-tian/p/10930085.html</strong></span></p>
<p><span style="font-size: 16px"><strong>2、embed</strong></span></p>
<p><span style="font-size: 14px"><strong>embed和object都是网页用的嵌入脚本,用来播放flash文件的</strong></span></p>
<p><span style="font-size: 14px"><strong>如果使用的是flash文件或者其他video标签不支持的格式。那么可以使用embed标签插入。</strong></span></p>
<p><span style="font-size: 14px"><strong><strong>embed标签只支持PC端，移动端无效，video标签移动和PC端均支持，如果你的视频文件是mp4格式的，那么推荐使用video标签，兼容PC端和移动端。</strong></strong></span></p>
<p><span style="font-size: 14px"><strong>我们要在网页中正常显示flash内容，那么页面中必须要有指定flash路径的标签。也就是OBJECT和EMBED标签</strong></span></p>
<p> </p>
<p>embed标签是html5版本新增的标签，是使用来定义嵌入的内容（如插件、媒体等）</p>
<p>如果浏览器没安装没启用flash，那么浏览器会跳出一个提示框访问是否要自动安装flash player。</p>
<p>object和embed的区别：<br>是为了兼容不同浏览器，IE只支持对Object的解析；火狐，谷歌，Safari只支持对Embed的解析。注意：使用<code><object></code>+<code><embed></code>是为了更好的兼容性，如果场景允许，推荐使用<code><object></code>。</p>
<p>语法：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">embed </span><span style="color: rgba(255, 0, 0, 1)">src</span><span style="color: rgba(0, 0, 255, 1)">="/i/helloworld.swf"</span><span style="color: rgba(255, 0, 0, 1)"> type</span><span style="color: rgba(0, 0, 255, 1)">="application/x-shockwave-flash"</span> <span style="color: rgba(0, 0, 255, 1)">/></span></pre>
</div>
<p>embed标签属性值：</p>
<table style="height: 313px; width: 570px" border="0">
<tbody>
<tr>
<td>标签属性设置</td>
<td>说明 </td>
</tr>
<tr>
<td>src</td>
<td>被嵌入内容的地址</td>
</tr>
<tr>
<td>type</td>
<td>嵌入内容的文件类型MIME类型</td>
</tr>
<tr>
<td>autostart</td>
<td>自动播放（boolean）</td>
</tr>
<tr>
<td>loop</td>
<td>循环播放（boolean）</td>
</tr>
<tr>
<td>hidden</td>
<td>控制面板是否显示(true,no)</td>
</tr>
<tr>
<td>starttime=mm:ss（分：秒）</td>
<td>开始播放的时间</td>
</tr>
<tr>
<td>volume</td>
<td>音量大小(0~100)</td>
</tr>
<tr>
<td>height、width</td>
<td>容器属性</td>
</tr>
<tr>
<td>units</td>
<td>该属性指定高和宽的单位为pixels或en</td>
</tr>
<tr>
<td>controls=console</td>
<td>一般正常面板(多属性值)</td>
</tr>
<tr>
<td>name</td>
<td>该属性给对象取名，以便其他对象利用</td>
</tr>
<tr>
<td>title=</td>
<td>说明文字</td>
</tr>
<tr>
<td>palette=color|color</td>
<td>表示嵌入的音频或视频文件的前景色和背景色，第一个值为前景色，第二个值为背景色，中间用 | 隔开。color可以是RGB色（RRGGBB）也可以是颜色名</td>
</tr>
<tr>
<td>align</td>
<td>规定控制面板和当前行中的对象的对齐方式</td>
</tr>
</tbody>
</table>
<p> </p>
<p><span class="bjh-strong"><br>embed支持很多媒体类型比如图像、音频、视频、可以参考文件类型（IANA MIME 类型）列表，说明：embed标签是一个空标签，没有元素内容。在html中可以不关闭标签，而在xhtml中必须使用“/”关闭标签，如：<embed /></span></p>
<p><span class="bjh-strong">MIME(Multipurpose Internet Mail Extensions)多用途互联网邮件扩展类型。是设定某种扩展名的文件用一种应用程序来打开的方式类型，当该扩展名文件被访问的时候，浏览器会自动使用指定应用程序来打开。</span></p>
<p><span class="bjh-strong">常用的MIME类型：</span></p>
<p> </p>
<table style="width: 666px">
<tbody>
<tr>
<td align="center" valign="middle" width="153" height="24">文件后缀</td>
<td align="center" valign="middle" width="273" height="24">Mime类型</td>
<td align="center" valign="middle" width="197" height="24">说明</td>
</tr>
<tr>
<td valign="top" width="168">.flv</td>
<td valign="top" width="277">flv/flv-flash </td>
<td valign="top" width="209">在线播放</td>
</tr>
<tr>
<td valign="top" width="175">.html或.htm </td>
<td valign="top" width="270">text/html </td>
<td valign="top" width="215">超文本标记语言文本</td>
</tr>
<tr>
<td valign="top" width="178">.rtf </td>
<td valign="top" width="267">application/rtf</td>
<td valign="top" width="219">RTF文本</td>
</tr>
<tr>
<td valign="top" width="179">.gif </td>
<td valign="top" width="265">image/gif</td>
<td valign="top" width="221">GIF图形</td>
</tr>
<tr>
<td valign="top" width="179">.jpeg或.jpg </td>
<td valign="top" width="264">image/jpeg</td>
<td valign="top" width="223">JPEG图形</td>
</tr>
<tr>
<td valign="top" width="178">.au</td>
<td valign="top" width="263">audio/basic </td>
<td valign="top" width="224">au声音文件</td>
</tr>
<tr>
<td valign="top" width="178">.mid或.midi</td>
<td valign="top" width="263">audio/midi或audio/x-midi</td>
<td valign="top" width="224">MIDI音乐文件</td>
</tr>
<tr>
<td valign="top" width="178">.ra或.ram或.rm </td>
<td valign="top" width="263">audio/x-pn-realaudio</td>
<td valign="top" width="224">RealAudio音乐文件</td>
</tr>
<tr>
<td rowspan="1" colspan="1" valign="top" width="178">.mpg或.mpeg或.mp3 </td>
<td rowspan="1" colspan="1" valign="top" width="263">video/mpeg</td>
<td rowspan="1" colspan="1" valign="top" width="224">MPEG文件</td>
</tr>
<tr>
<td rowspan="1" colspan="1" valign="top" width="178">.avi </td>
<td rowspan="1" colspan="1" valign="top" width="263">video/x-msvideo</td>
<td rowspan="1" colspan="1" valign="top" width="224">AVI文件</td>
</tr>
<tr>
<td rowspan="1" colspan="1" valign="top" width="178">.gz</td>
<td rowspan="1" colspan="1" valign="top" width="263">application/x-gzip</td>
<td rowspan="1" colspan="1" valign="top" width="224">GZIP文件</td>
</tr>
<tr>
<td rowspan="1" colspan="1" valign="top" width="178">.tar</td>
<td rowspan="1" colspan="1" valign="top" width="263">application/x-tar </td>
<td rowspan="1" colspan="1" valign="top" width="224">TAR文件</td>
</tr>
<tr>
<td rowspan="1" colspan="1" valign="top" width="178">.exe </td>
<td rowspan="1" colspan="1" valign="top" width="263">application/octet-stream</td>
<td rowspan="1" colspan="1" valign="top" width="224">下载文件类型</td>
</tr>
<tr>
<td rowspan="1" colspan="1" valign="top" width="178">.rmvb </td>
<td rowspan="1" colspan="1" valign="top" width="263">video/vnd.rn-realvideo </td>
<td rowspan="1" colspan="1" valign="top" width="224">在线播放</td>
</tr>
<tr>
<td rowspan="1" colspan="1" valign="top" width="178">.txt </td>
<td rowspan="1" colspan="1" valign="top" width="263">text/plain</td>
<td rowspan="1" colspan="1" valign="top" width="224">普通文本</td>
</tr>
<tr>
<td rowspan="1" colspan="1" valign="top" width="178">.mrp </td>
<td rowspan="1" colspan="1" valign="top" width="263">application/octet-stream </td>
<td rowspan="1" colspan="1" valign="top" width="224">MRP文件（国内普遍的手机）</td>
</tr>
<tr>
<td rowspan="1" colspan="1" valign="top" width="178">.ipa</td>
<td rowspan="1" colspan="1" valign="top" width="263">application/iphone-package-archive</td>
<td rowspan="1" colspan="1" valign="top" width="224">IPA文件(IPHONE)</td>
</tr>
<tr>
<td rowspan="1" colspan="1" valign="top" width="178">.deb </td>
<td rowspan="1" colspan="1" valign="top" width="263">application/x-debian-package-archive</td>
<td rowspan="1" colspan="1" valign="top" width="224">DED文件(IPHONE)</td>
</tr>
<tr>
<td rowspan="1" colspan="1" valign="top" width="178">.apk</td>
<td rowspan="1" colspan="1" valign="top" width="263">application/vnd.android.package-archive </td>
<td rowspan="1" colspan="1" valign="top" width="224">APK文件(安卓系统)</td>
</tr>
<tr>
<td rowspan="1" colspan="1" valign="top" width="178">.cab</td>
<td rowspan="1" colspan="1" valign="top" width="263">application/vnd.cab-com-archive </td>
<td rowspan="1" colspan="1" valign="top" width="224">CAB文件(Windows Mobile)</td>
</tr>
<tr>
<td rowspan="1" colspan="1" valign="top" width="178">.xap</td>
<td rowspan="1" colspan="1" valign="top" width="263">application/x-silverlight-app </td>
<td rowspan="1" colspan="1" valign="top" width="224">XAP文件(Windows Phone 7)</td>
</tr>
<tr>
<td rowspan="1" colspan="1" valign="top" width="178">.sis</td>
<td rowspan="1" colspan="1" valign="top" width="263">application/vnd.symbian.install-archive</td>
<td rowspan="1" colspan="1" valign="top" width="224">SIS文件(symbian平台)</td>
</tr>
<tr>
<td rowspan="1" colspan="1" valign="top" width="178">.jar </td>
<td rowspan="1" colspan="1" valign="top" width="263">application/java-archive</td>
<td rowspan="1" colspan="1" valign="top" width="224">JAR文件(JAVA平台手机通用格式)</td>
</tr>
<tr>
<td rowspan="1" colspan="1" valign="top" width="178">.jad</td>
<td rowspan="1" colspan="1" valign="top" width="263">text/vnd.sun.j2me.app-descriptor</td>
<td rowspan="1" colspan="1" valign="top" width="224">JAD文件(JAVA平台手机通用格式)</td>
</tr>
<tr>
<td valign="top" width="178">.sisx </td>
<td valign="top" width="263">application/vnd.symbian.epoc/x-sisx-app </td>
<td valign="top" width="224">SISX文件(symbian平台)</td>
</tr>
</tbody>
</table>
<p><span style="font-size: 16px"><strong>3、Object</strong></span></p>
<p>object参数说明<br>param name标签是在这个播放插件中嵌入的一些功能和播放参数,比如（你可以抄下来）: <br><param name="playcount" value="1"><!--控制重复次数: “x”为几重复播放几次; x=0，无限循环。--> <br><param name="autostart" value="0"><!--控制播放方式: x=1，打开网页自动播放; x=0，按播放键播放。--> <br><param name="clicktoplay" value="1"><!--控制播放开关: x=1，可鼠标点击控制播放或暂停状态; x=0，禁用此功能。--> <br><param name="displaysize" value="0"><!--控制播放画面: x=0，原始大小; x=1，一半大小; x=2，2倍大小。--> <br><param name="enablefullscreen controls" value="1"><!--控制切换全屏: x=1，允许切换为全屏; x=0，禁用此功能。--> <br><param name="showaudio controls" value="1"><!--控制音量: x=1，允许调节音量; x=0，禁止音量调节。--> <br><param name="enablecontext menu" value="1"><!--控制快捷菜单: x=1，允许使用右键菜单; x=0，禁用右键菜单。--> <br><param name="showdisplay" value="1"><!--控制版权信息: x=1，显示电影及作者信息;x=0，不显示相关信息--> <br><param NAME="AutoStart" VALUE="-1"><!--是否自动播放--> <br><param NAME="Balance" VALUE="0"><!--调整左右声道平衡,同上面旧播放器代码--> <br><param name="enabled" value="-1"><!--播放器是否可人为控制--> <br><param NAME="EnableContextMenu" VALUE="-1"><!--是否启用上下文菜单--> <br><param NAME="url" VALUE="http://1.wma"> <!--播放的文件地址--><param NAME="PlayCount" VALUE="1"><!--播放次数控制,为整数--> <br><param name="rate" value="1"><!--播放速率控制,1为正常,允许小数,1.0-2.0--> <br><param name="currentPosition" value="0"><!--控件设置:当前位置--> <br><param name="currentMarker" value="0"><!--控件设置:当前标记--> <br><param name="defaultFrame" value=""><!--显示默认框架--> <br><param name="invokeURLs" value="0"><!--脚本命令设置:是否调用URL--> <br><param name="baseURL" value=""><!--脚本命令设置:被调用的URL--> <br><param name="stretchToFit" value="0"><!--是否按比例伸展--> <br><param name="volume" value="50"><!--默认声音大小0%-100%,50则为50%--> <br><param name="mute" value="0"><!--是否静音-- <br><param name="uiMode" value="mini"><!--播放器显示模式:Full显示全部;mini最简化;None不显示播放控制,只显示视频窗口;invisible全部不显示--><param name="windowlessVideo" value="0"><!--如果是0可以允许全屏,否则只能在窗口中查看--> <br><param name="fullScreen" value="0"><!--开始播放是否自动全屏--> <br><param name="enableErrorDialogs" value="-1"><!--是否启用错误提示报告--> <br><param name="SAMIStyle" value><!--SAMI样式--> <br><param name="SAMIFilename" value><!--字幕ID--> <br><br></p>
<p>使用 object 和 embed 标签来嵌入，细心的会发现，object 的很多参数和 embed 里面的很多属性是重复的，为什么这样做？为了浏览器兼容性，有的浏览器支持 object，有的支持 embed，这也是为什么要修改 Flash 的参数时两个地方都要改的原因。这种方法是 Macromedia 一直以来的官方方法，最大限度的保证了 Flash 的功能，没有兼容性问题。<br>现阶段用 JS 嵌入 Flash 是最完美的方法.</p>
<p>对于不支持object的浏览器，可以使用如下方式，浏览器将跳过object，识别embed元素：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 128, 1)">1</span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">object </span><span style="color: rgba(255, 0, 0, 1)">width</span><span style="color: rgba(0, 0, 255, 1)">="400"</span><span style="color: rgba(255, 0, 0, 1)"> height</span><span style="color: rgba(0, 0, 255, 1)">="40"</span><span style="color: rgba(255, 0, 0, 1)"> classid</span><span style="color: rgba(0, 0, 255, 1)">="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"</span><span style="color: rgba(255, 0, 0, 1)"> codebase</span><span style="color: rgba(0, 0, 255, 1)">="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 128, 128, 1)">2</span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">param </span><span style="color: rgba(255, 0, 0, 1)">name</span><span style="color: rgba(0, 0, 255, 1)">="SRC"</span><span style="color: rgba(255, 0, 0, 1)"> value</span><span style="color: rgba(0, 0, 255, 1)">="bookmark.swf"</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 128, 128, 1)">3</span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">embed </span><span style="color: rgba(255, 0, 0, 1)">src</span><span style="color: rgba(0, 0, 255, 1)">="bookmark.swf"</span><span style="color: rgba(255, 0, 0, 1)"> width</span><span style="color: rgba(0, 0, 255, 1)">="400"</span><span style="color: rgba(255, 0, 0, 1)"> height</span><span style="color: rgba(0, 0, 255, 1)">="40"</span><span style="color: rgba(0, 0, 255, 1)">></</span><span style="color: rgba(128, 0, 0, 1)">embed</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 128, 128, 1)">4</span> <span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">object</span><span style="color: rgba(0, 0, 255, 1)">></span></pre>
</div>
<p>播放音频可使用object、embed，此外html5也有audio标签与video相对应，且用法相同。</p>
<p> </p>
<p></p>
</div>
<div id="MySignature" role="contentinfo">
静则思，思则变，变则通，通则达<br><br>
来源：https://www.cnblogs.com/jing-tian/p/10961535.html
頁:
[1]