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

时间:2020-4-29    作者:文博    分类: WEB前端


一、基本语法

 

代码如下:

embed src=url

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

示例:

代码如下:

<embed src=”your.mid”>

 

二、属性设置

1、自动播放:

语法:autostart=true、false

说明:该属性规定音频或视频文件是否在下载完之后就自动播放。

true:音乐文件在下载完之后自动播放;

false:音乐文件在下载完之后不自动播放。

示例:

代码如下:

<embed src=”your.mid” autostart=true>

<embed src=”your.mid” autostart=false>

2、循环播放:

语法:loop=正整数、true、false

说明:该属性规定音频或视频文件是否循环及循环次数。

属性值为正整数值时,音频或视频文件的循环次数与正整数值相同;

属性值为true时,音频或视频文件循环;

属性值为false时,音频或视频文件不循环。

示例:

代码如下:

<embed src=”your.mid” autostart=true loop=2>

<embed src=”your.mid” autostart=true loop=true>

<embed src=”your.mid” autostart=true loop=false>

3、面板显示:

语法:hidden=ture、no

说明:该属性规定控制面板是否显示,默认值为no。

ture:隐藏面板;

no:显示面板。

示例:

代码如下:

<embed src=”your.mid” hidden=ture>

<embed src=”your.mid” hidden=no>

4、开始时间:

语法:starttime=mm:ss(分:秒)

说明:该属性规定音频或视频文件开始播放的时间。未定义则从文件开头播放。

示例:

代码如下:

<embed src=”your.mid” starttime=”00:10″>

5、音量大小:

语法:volume=0-100之间的整数

说明:该属性规定音频或视频文件的音量大小。未定义则使用系统本身的设定。

示例:

代码如下:

<embed src=”your.mid” volume=”10″>

6、容器属性:

语法:height=# width=#

说明:取值为正整数或百分数,单位为像素。该属性规定控制面板的高度和宽度。

height:控制面板的高度;

width:控制面板的宽度。

示例:

代码如下:

<embed src=”your.mid” height=200 width=200>

7、容器单位:

语法:units=pixels、en

说明:该属性指定高和宽的单位为pixels或en。

示例:

代码如下:

<embed src=”your.mid” units=”pixels” height=200 width=200>

<embed src=”your.mid” units=”en” height=200 width=200>

8、外观设置:

语法:controls=console、smallconsole、playbutton、pausebutton、stopbutton、volumelever 说明:该属性规定控制面板的外观。默认值是console。

console:一般正常面板;

smallconsole:较小的面板;

playbutton:只显示播放按钮;

pausebutton:只显示暂停按钮;

stopbutton:只显示停止按钮;

volumelever:只显示音量调节按钮。

示例:

代码如下:

<embed src=”your.mid” controls=smallconsole>

<embed src=”your.mid” controls=volumelever>

9、对象名称:

语法:name=#

说明:#为对象的名称。该属性给对象取名,以便其他对象利用。

示例:

代码如下:

<embed src=”your.mid” name=”video”>

10、说明文字:

语法:title=#

说明:#为说明的文字。该属性规定音频或视频文件的说明文字。

示例:

代码如下:

<embed src=”your.mid” title=”第一首歌”>

11、前景色和背景色:

语法:palette=color|color

说明:该属性表示嵌入的音频或视频文件的前景色和背景色,第一个值为前景色,第二个值为背景色,中间用 | 隔开。color可以是RGB色(RRGGBB)也可以是颜色名,还可以是transparent (透明)。

示例:

代码如下:

<embed src=”your.mid” palette=”red|black”>

12、对齐方式:

语法:align=top、bottom、center、baseline、 left、right、texttop、middle、absmiddle、absbottom

说明:该属性规定控制面板和当前行中的对象的对齐方式。

center:控制面板居中;

left:控制面板居左;

right:控制面板居右;

top:控制面板的顶部与当前行中的最高对象的顶部对齐;

bottom:控制面板的底部与当前行中的对象的基线对齐;

baseline:控制面板的底部与文本的基线对齐;

texttop:控制面板的顶部与当前行中的最高的文字顶部对齐;

middle:控制面板的中间与当前行的基线对齐;

absmiddle:控制面板的中间与当前文本或对象的中间对齐;

absbottom:控制面板的底部与文字的底部对齐。

示例:

代码如下:

<embed src=”your.mid” align=top>

<embed src=”your.mid” align=center>

 

编码与格式的误区
很多人将编码和格式误认为是同一个东西,往往以视频文件的后缀来唯一确定视频文件的支持程度。而事实上,用一句话来概括就是:视频的文件后缀(假设没有恶意修改后缀)实际上代表一种封装格式,而视频或者音频的编码算法与封装格式本身无直接的关系:同样的封装格式(即同样的后缀)可以封装不同编码算法的视频和音频。而视频播放设备或软件是否支持视频的播放,不仅仅要看封装格式,还要看编码算法。认清这一点是理解和排查问题的基础。
封装格式规定了视频的所有内容,包括图像,声音,字幕,系统控制等,其中以图像和声音最为关键。
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。以下关于兼容的内容,来源于维基百科和格式工厂以及笔者的测试:
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基金会开发,可被用于任何封装格式),音频为Vorbis。后缀通常为.ogv或.ogg,MIME类型为video/ogg。在兼容性上,Chrome、Firefox、Opera能够支持(但是Opera在移动平台上无法支持),但是Safari和IE几乎无法支持。
Html5方案
以上的讨论实际上的大前提是:视频基于Html5的<video>方案。现在我们来总结一下兼容性:
Codecs/container
IE
Firefox
Safari
Chrome
Opera
iPhone
Android
Theora+Vorbis+Ogg
·
3.5+
5.0+
10.5+
·
·
H.264+AAC+MP4
9.0+
·
3.0+
5.0+‡
·
3.0+
2.0+
WebM
9.0+*
4.0+
6.0+
10.6+
·
2.3+
* IE9 “只有当用户安装了VP8的编解码器时”才能支持VP8。
‡ Google Chrome 2011年宣布 放弃H.264, 但是“还没兑现”。
可以看出现在主流的仍然是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″‘>
        <p>This is fallback content</p>
</video>
浏览器会根据自己的偏好来选择具体加载那种格式的流媒体文件,当然服务端必须对同一个视频提供多种格式的支持,具体可以这么做:
服务端推荐使用nginx,尽量注意MIME类型的配置正确
旧版本的IEflash
在html5流行之前,通用的视频播放解决方案是flash和flv(flash从9开始支持h.264的mp4)。但是随着ios设备的流行,flash已经不是万能药了,越来越多的视频网站提供多元的解决方案,而且偏向于html5:也就是说,通过检测agent是否支持html5来决定使用video还是flash。在面对IE8以下的浏览器时,flash几乎是唯一的选择(silverlight的接受度普遍不高)。
当然针对flash和flv的方案,也有多种实现方法,笔者能够想到的有如下两种:
</video>