HTML之embed标签使用方法和属性详解

怼烎@ 2022-05-18 04:17 431阅读 0赞

### 一、基本语法 ###

代码如下:

说明：embed可以用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU、MP3等等，Netscape及新版的IE 都支持。url为音频或视频文件及其路径，可以是相对路径或绝对路径。  
   
示例:  
   
代码如下:

###        二、属性设置 ###

1、自动播放：  
   
语法：autostart=true、false  
   
说明：该属性规定音频或视频文件是否在下载完之后就自动播放。  
   
true：音乐文件在下载完之后自动播放；  
   
false：音乐文件在下载完之后不自动播放。  
   
示例：  
   
代码如下:

2、循环播放：  
   
语法：loop=正整数、true、false  
   
说明：该属性规定音频或视频文件是否循环及循环次数。  
   
属性值为正整数值时，音频或视频文件的循环次数与正整数值相同；  
   
属性值为true时，音频或视频文件循环；  
   
属性值为false时，音频或视频文件不循环。  
   
示例：  
   
代码如下:

3、面板显示：  
   
语法：hidden=ture、no  
   
说明：该属性规定控制面板是否显示，默认值为no。  
   
ture：隐藏面板；  
   
no：显示面板。  
   
示例：  
   
代码如下:

4、开始时间：  
   
语法：starttime=mm:ss（分：秒）  
   
说明：该属性规定音频或视频文件开始播放的时间。未定义则从文件开头播放。  
   
示例：  
   
代码如下:

5、音量大小：  
   
语法：volume=0-100之间的整数  
   
说明：该属性规定音频或视频文件的音量大小。未定义则使用系统本身的设定。  
   
示例：  
   
代码如下:

6、容器属性：  
   
语法：height=\# width=\#  
   
说明：取值为正整数或百分数，单位为像素。该属性规定控制面板的高度和宽度。  
   
height：控制面板的高度；  
   
width：控制面板的宽度。  
   
示例：  
   
代码如下:

7、容器单位：  
   
语法：units=pixels、en  
   
说明：该属性指定高和宽的单位为pixels或en。  
   
示例：  
   
代码如下:

8、外观设置：  
   
语法：controls=console、smallconsole、playbutton、pausebutton、stopbutton、volumelever 说明：该属性规定控制面板的外观。默认值是console。  
   
console：一般正常面板；  
   
smallconsole：较小的面板；  
   
playbutton：只显示播放按钮；  
   
pausebutton：只显示暂停按钮；  
   
stopbutton：只显示停止按钮；  
   
volumelever：只显示音量调节按钮。  
   
示例：  
   
代码如下:

9、对象名称：  
   
语法：name=\#  
   
说明：\#为对象的名称。该属性给对象取名，以便其他对象利用。  
   
示例：  
   
代码如下:

10、说明文字：  
   
语法：title=\#  
   
说明：\#为说明的文字。该属性规定音频或视频文件的说明文字。  
   
示例：  
   
代码如下:

11、前景色和背景色：  
   
语法：palette=color|color  
   
说明：该属性表示嵌入的音频或视频文件的前景色和背景色，第一个值为前景色，第二个值为背景色，中间用 | 隔开。color可以是RGB色（RRGGBB）也可以是颜色名，还可以是transparent （透明）。  
   
示例：  
   
代码如下:

12、对齐方式：  
   
语法：align=top、bottom、center、baseline、 left、right、texttop、middle、absmiddle、absbottom  
   
说明：该属性规定控制面板和当前行中的对象的对齐方式。  
   
center：控制面板居中；  
   
left：控制面板居左；  
   
right：控制面板居右；  
   
top：控制面板的顶部与当前行中的最高对象的顶部对齐；  
   
bottom：控制面板的底部与当前行中的对象的基线对齐；  
   
baseline：控制面板的底部与文本的基线对齐；  
   
texttop：控制面板的顶部与当前行中的最高的文字顶部对齐；  
   
middle：控制面板的中间与当前行的基线对齐；  
   
absmiddle：控制面板的中间与当前文本或对象的中间对齐；  
   
absbottom：控制面板的底部与文字的底部对齐。  
   
示例：  
   
代码如下:

**编码与格式的误区**

很多人将编码和格式误认为是同一个东西，往往以视频文件的后缀来唯一确定视频文件的支持程度。而事实上，用一句话来概括就是：视频的文件后缀（假设没有恶意修改后缀）实际上代表一种封装格式，而视频或者音频的编码算法与封装格式本身无直接的关系：同样的封装格式（即同样的后缀）可以封装不同编码算法的视频和音频。而视频播放设备或软件是否支持视频的播放，不仅仅要看封装格式，还要看编码算法。认清这一点是理解和排查问题的基础。

封装格式规定了视频的所有内容，包括图像，声音，字幕，系统控制等，其中以图像和声音最为关键。

**从****MPEG****说起**

MPEG是一个定义视频规格的国际组织，他们曾经推出的MPEG-1和MPEG-2实际上分别就是大家熟知的VCD和DVD，不过这都是远古的东西了。我们来看看跟本文主题有关的MPEG-4规范。

[MPEG-4][]规范规定了文件后缀名为.mp4，目前包括三种图像编码和压缩算法：[Xvid][]\\DivX\\AVC(H.264)，其中Xvid和DivX也可以统称为MPEG-4 Part 2或者MPEG-4 Visual，而更为知名的H.264和AVC是相同的概念。音频方面则是AAC。以下关于兼容的内容，来源于[维基百科][Link 1]和格式工厂以及笔者的测试：

*  Android浏览器：支持DivX和AVC，Xvid应该不支持
 *  iPhone和iPad（iOS）：支持DivX和AVC，Xvid不支持
 *  Chrome：支持AVC，不支持DivX和Xvid。谷歌曾在2011年初[宣布][Link 2]由于许可问题，将移除Chrome浏览器对AVC(H.264)的支持。但是直到目前的版本，AVC还在被支持。另外，实际测试下来，如果是DivX和AAC封装在mp4中的话，chrome可以播放，但是只有声音(AAC)。
 *  Firefox和Opera：还是由于许可的问题，Firefox和Opera逐渐动摇了对AVC的支持，笔者在最新的Firefox中测试AVC仍然可以播放（[维基百科][Link 1]的解释是可能与系统本身具有解码器有关）；至于DivX和Xvid，笔者在Firefox下的测试结果是不支持。从维基百科的兼容列表看，Opera对AVC支持的不好。
 *  IE：笔者的IE11能够支持AVC，不支持DivX和Xvid

**WebM****的倡导**

由于AVC(H.264)的授权问题，以Chrome、Firefox、Opera为首的开源阵营开始动摇对AVC的支持，尽管目前这些浏览器仍然能够支持AVC，但是它们也倾向于一个叫做[WebM][]的开源多媒体项目，该项目包括一个叫VP8的新的开源视频编解码方案。目前VP8已经发展到了VP9。作为封装格式的WebM具有.webm的后缀和video/webm的MIME类型。在音频方面，可以使用[Vorbis][]/[Opus][]。从兼容性看，Chrome、Firefox、Opera对VP8的兼容性相当理想，但是Safari和IE几乎无法支持。

**开源的****Ogg**

[Ogg][]几乎与WebM相同，开源，被广泛的在开源平台支持。其视频编码方案称为[Theora][](有VP3发展而来，由[Xiph.org基金会开发][Xiph.org]，可被用于任何封装格式)，音频为[Vorbis][]。后缀通常为.ogv或.ogg，MIME类型为video/ogg。在兼容性上，Chrome、Firefox、Opera能够支持（但是Opera在移动平台上无法支持），但是Safari和IE几乎无法支持。

**Html5****方案**

以上的讨论实际上的大前提是：视频基于Html5的<video>方案。现在我们来总结一下兼容性：

<table> 
 <thead> 
 <tr> 
 <td> Codecs/container </td> 
 <td> IE </td> 
 <td> Firefox </td> 
 <td> Safari </td> 
 <td> Chrome </td> 
 <td> Opera </td> 
 <td> iPhone </td> 
 <td> Android </td> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td> Theora+Vorbis+Ogg </td> 
 <td> · </td> 
 <td> 3.5+ </td> 
 <td> &nbsp; </td> 
 <td> 5.0+ </td> 
 <td> 10.5+ </td> 
 <td> · </td> 
 <td> · </td> 
 </tr> 
 <tr> 
 <td> H.264+AAC+MP4 </td> 
 <td> 9.0+ </td> 
 <td> · </td> 
 <td> 3.0+ </td> 
 <td> 5.0+‡ </td> 
 <td> · </td> 
 <td> 3.0+ </td> 
 <td> 2.0+ </td> 
 </tr> 
 <tr> 
 <td> WebM </td> 
 <td> 9.0+* </td> 
 <td> 4.0+ </td> 
 <td> &nbsp; </td> 
 <td> 6.0+ </td> 
 <td> 10.6+ </td> 
 <td> · </td> 
 <td> 2.3+ </td> 
 </tr> 
 <tr> 
 <td colspan="8"> * IE9 “<a href="http://windowsteamblog.com/windows/b/bloggingwindows/archive/2010/05/19/another-follow-up-on-html5-video-in-ie9.aspx" rel="nofollow">只有当用户安装了VP8的编解码器时</a>”才能支持VP8。 </td> 
 </tr> 
 <tr> 
 <td colspan="8"> ‡ Google Chrome 2011年<a href="http://blog.chromium.org/2011/01/more-about-chrome-html-video-codec.html" rel="nofollow">宣布</a>&nbsp;<a href="http://blog.chromium.org/2011/01/html-video-codec-support-in-chrome.html" rel="nofollow">放弃H.264</a>, 但是“还没兑现”。 </td> 
 </tr> 
 </tbody> 
</table>

可以看出现在主流的仍然是MP4(AVC)，但是为了解决“开源阵营”对AVC的摇摆不定，可以选择利用video的多源方案，在AVC的基础上额外提供对webm或ogg的支持：

<video poster="movie.jpg" controls>
 
         <source src="movie.webm" type='video/webm; codecs="vp8.0, vorbis"'>
 
         <source src="movie.ogg" type='video/ogg; codecs="theora, vorbis"'>
 
         <source src="movie.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
 
         This is fallback content
 
 </video>

浏览器会根据自己的偏好来选择具体加载那种格式的流媒体文件，当然服务端必须对同一个视频提供多种格式的支持，具体可以这么做：

1.  提供一个WebM的视频版本（VP8+Vorbis）
2.  提供一个MP4的视频版本（H.264+AAC(low complexity)）
3.  提供Ogg版本（Theora+Vorbis）

服务端推荐使用nginx，尽量注意MIME类型的配置正确

**旧版本的****IE****和****flash**

在html5流行之前，通用的视频播放解决方案是flash和flv（flash从9开始支持h.264的mp4）。但是随着ios设备的流行，flash已经不是万能药了，越来越多的视频网站提供多元的解决方案，而且偏向于html5：也就是说，通过检测agent是否支持html5来决定使用video还是flash。在面对IE8以下的浏览器时，flash几乎是唯一的选择(silverlight的接受度普遍不高)。

当然针对flash和flv的方案，也有多种实现方法，笔者能够想到的有如下两种：

*  服务端根据agent的类型，输出不同的html，如果支持html5就输出video+mp4(avc)和webm（或者ogg），否则输出flash相关的标签或脚本
 *  使用[html5shiv][]和[html5-video][]是IE也能够支持video标签，并且使用Flash播放器来代替原生的video播放，[参考][Link 3]
 *  将object内嵌在video中：

<video id="movie" width="320" height="240" preload controls>
 		  
 	<source src="pr6.webm" type="video/webm; codecs=vp8,vorbis" />
 			  
 	<source src="pr6.ogv" type="video/ogg; codecs=theora,vorbis" />
 			  
 	<source src="pr6.mp4" />
 			  
 	<object width="320" height="240" type="application/x-shockwave-flash"
 	    data="flowplayer-3.2.1.swf">
 				    
 		<param name="movie" value="flowplayer-3.2.1.swf" />
 				    
 		<param name="allowfullscreen" value="true" />
 				    
 		<param name="flashvars"
 			value="config={'clip': {'url': 'http://wearehugh.com/dih5/pr6.mp4',
 'autoPlay':false, 'autoBuffering':true}}" />
 				    
 		
 			Download video as
 			<a href="pr6.mp4">MP4</a>,
 			<a href="pr6.webm">WebM</a>, or
 			<a href="pr6.ogv">Ogg</a>.
 		
 			  
 	</object>
 </video>

**工具**

*  [格式工厂][Link 4]是推荐的比较好的格式转换工具，支持格式转换、视频分割、添加水印等，甚至可以用命令行和参数运行，笔者发现百度云存储提供视频转化和托管服务就是用的格式工厂做视频转化的。但是目前为止，格式工厂不能支持webm和ogg。
 *  [DVDVideoSoft Free Studio][]界面比较酷，功能也比较强大，更重要的是其能够支持webm。
 *  [ffmpeg][]是一个开源的跨平台的提供视频和音频转化的解决方案，其中包括一个可用的转化工具（命令行形式），和一些可扩展和调用的类库，对于对视频有自动化转化和深度定制需求的用户是不错的选择。
 *  [ffmpeg2theora][]可以有效的对ffmpeg在theora上的补充，也是基于命令行执行
 *  [HandBrake][] 支持命令行和GUI，作为ffmpeg的补充，进行H.264的转化
 *  [Miro Video Converter][]也是一款开源的视频转化软件，对各种设备和格式的支持都很不错，有mac版和windows版，推荐mac用户使用。

[http://diveintohtml5.info/video.html][http_diveintohtml5.info_video.html]

[MPEG-4]: http://zh.wikipedia.org/wiki/MPEG-4
[Xvid]: http://zh.wikipedia.org/wiki/XviD
[Link 1]: http://en.wikipedia.org/wiki/Html_video_tag
[Link 2]: http://www.guao.hk/posts/chrome-removes-h-264-codec.html
[WebM]: http://en.wikipedia.org/wiki/WebM_Project
[Vorbis]: http://en.wikipedia.org/wiki/Vorbis
[Opus]: http://en.wikipedia.org/wiki/Opus_%28audio_format%29
[Ogg]: http://en.wikipedia.org/wiki/Ogg
[Theora]: http://en.wikipedia.org/wiki/Theora
[Xiph.org]: http://xiph.org/
[html5shiv]: https://github.com/aFarkas/html5shiv
[html5-video]: http://diveintohtml5.info/j/html5-video.js
[Link 3]: http://webdesign.about.com/od/video/ss/html5-video_9.htm
[Link 4]: http://www.pcfreetime.com/cn/
[DVDVideoSoft Free Studio]: http://www.dvdvideosoft.com/
[ffmpeg]: http://www.ffmpeg.org/
[ffmpeg2theora]: http://diveintohtml5.info/video.html#ffmpeg2theora
[HandBrake]: http://diveintohtml5.info/video.html#handbrake-gui
[Miro Video Converter]: http://www.mirovideoconverter.com/
[http_diveintohtml5.info_video.html]: http://diveintohtml5.info/video.html