HTML embed標(biāo)簽使用方法和屬性詳解

一、基本語法

代碼如下:

embed src=url

說明：embed可以用來插入各種多媒體，格式可以是 Midi、Wav、AIFF、AU、MP3等等，Netscape及新版的IE 都支持。url為音頻或視頻文件及其路徑，可以是相對路徑或絕對路徑。

示例:

代碼如下:

<embed src="your.mid">

二、屬性設(shè)置

1、自動播放：

語法：autostart=true、false

說明：該屬性規(guī)定音頻或視頻文件是否在下載完之后就自動播放。

true：音樂文件在下載完之后自動播放；

false：音樂文件在下載完之后不自動播放。

示例：

代碼如下:

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

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

2、循環(huán)播放：

語法：loop=正整數(shù)、true、false

說明：該屬性規(guī)定音頻或視頻文件是否循環(huán)及循環(huán)次數(shù)。

屬性值為正整數(shù)值時，音頻或視頻文件的循環(huán)次數(shù)與正整數(shù)值相同；

屬性值為true時，音頻或視頻文件循環(huán)；

屬性值為false時，音頻或視頻文件不循環(huán)。

示例：

代碼如下:

<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

說明：該屬性規(guī)定控制面板是否顯示，默認(rèn)值為no。

ture：隱藏面板；

no：顯示面板。

示例：

代碼如下:

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

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

4、開始時間：

語法：starttime=mm:ss（分：秒）

說明：該屬性規(guī)定音頻或視頻文件開始播放的時間。未定義則從文件開頭播放。

示例：

代碼如下:

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

5、音量大?。?/p>

語法：volume=0-100之間的整數(shù)

說明：該屬性規(guī)定音頻或視頻文件的音量大小。未定義則使用系統(tǒng)本身的設(shè)定。

示例：

代碼如下:

<embed src="your.mid" volume="10">

6、容器屬性：

語法：height=# width=#

說明：取值為正整數(shù)或百分?jǐn)?shù)，單位為像素。該屬性規(guī)定控制面板的高度和寬度。

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、外觀設(shè)置：

語法：controls=console、smallconsole、playbutton、pausebutton、stopbutton、volumelever 說明：該屬性規(guī)定控制面板的外觀。默認(rèn)值是console。

console：一般正常面板；

smallconsole：較小的面板；

playbutton：只顯示播放按鈕；

pausebutton：只顯示暫停按鈕；

stopbutton：只顯示停止按鈕；

volumelever：只顯示音量調(diào)節(jié)按鈕。

示例：

代碼如下:

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

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

9、對象名稱：

語法：name=#

說明：#為對象的名稱。該屬性給對象取名，以便其他對象利用。

示例：

代碼如下:

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

10、說明文字：

語法：title=#

說明：#為說明的文字。該屬性規(guī)定音頻或視頻文件的說明文字。

示例：

代碼如下:

<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

說明：該屬性規(guī)定控制面板和當(dāng)前行中的對象的對齊方式。

center：控制面板居中；

left：控制面板居左；

right：控制面板居右；

top：控制面板的頂部與當(dāng)前行中的最高對象的頂部對齊；

bottom：控制面板的底部與當(dāng)前行中的對象的基線對齊；

baseline：控制面板的底部與文本的基線對齊；

texttop：控制面板的頂部與當(dāng)前行中的最高的文字頂部對齊；

middle：控制面板的中間與當(dāng)前行的基線對齊；

absmiddle：控制面板的中間與當(dāng)前文本或?qū)ο蟮闹虚g對齊；

absbottom：控制面板的底部與文字的底部對齊。

示例：

代碼如下:

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

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

編碼與格式的誤區(qū)

很多人將編碼和格式誤認(rèn)為是同一個東西，往往以視頻文件的后綴來唯一確定視頻文件的支持程度。而事實上，用一句話來概括就是：視頻的文件后綴（假設(shè)沒有惡意修改后綴）實際上代表一種封裝格式，而視頻或者音頻的編碼算法與封裝格式本身無直接的關(guān)系：同樣的封裝格式（即同樣的后綴）可以封裝不同編碼算法的視頻和音頻。而視頻播放設(shè)備或軟件是否支持視頻的播放，不僅僅要看封裝格式，還要看編碼算法。認(rèn)清這一點(diǎn)是理解和排查問題的基礎(chǔ)。

封裝格式規(guī)定了視頻的所有內(nèi)容，包括圖像，聲音，字幕，系統(tǒng)控制等，其中以圖像和聲音最為關(guān)鍵。

從****MPEG****說起

MPEG是一個定義視頻規(guī)格的國際組織，他們曾經(jīng)推出的MPEG-1和MPEG-2實際上分別就是大家熟知的VCD和DVD，不過這都是遠(yuǎn)古的東西了。我們來看看跟本文主題有關(guān)的MPEG-4規(guī)范。

MPEG-4規(guī)范規(guī)定了文件后綴名為.mp4，目前包括三種圖像編碼和壓縮算法：Xvid\DivX\AVC(H.264)，其中Xvid和DivX也可以統(tǒng)稱為MPEG-4 Part 2或者M(jìn)PEG-4 Visual，而更為知名的H.264和AVC是相同的概念。音頻方面則是AAC。以下關(guān)于兼容的內(nèi)容，來源于維基百科和格式工廠以及筆者的測試：

  • Android瀏覽器：支持DivX和AVC，Xvid應(yīng)該不支持
  • iPhone和iPad（iOS）：支持DivX和AVC，Xvid不支持
  • Chrome：支持AVC，不支持DivX和Xvid。谷歌曾在2011年初宣布由于許可問題，將移除Chrome瀏覽器對AVC(H.264)的支持。但是直到目前的版本，AVC還在被支持。另外，實際測試下來，如果是DivX和AAC封裝在mp4中的話，chrome可以播放，但是只有聲音(AAC)。
  • Firefox和Opera：還是由于許可的問題，F(xiàn)irefox和Opera逐漸動搖了對AVC的支持，筆者在最新的Firefox中測試AVC仍然可以播放（維基百科的解釋是可能與系統(tǒng)本身具有解碼器有關(guān)）；至于DivX和Xvid，筆者在Firefox下的測試結(jié)果是不支持。從維基百科的兼容列表看，Opera對AVC支持的不好。
  • IE：筆者的IE11能夠支持AVC，不支持DivX和Xvid

WebM****的倡導(dǎo)

由于AVC(H.264)的授權(quán)問題，以Chrome、Firefox、Opera為首的開源陣營開始動搖對AVC的支持，盡管目前這些瀏覽器仍然能夠支持AVC，但是它們也傾向于一個叫做WebM的開源多媒體項目，該項目包括一個叫VP8的新的開源視頻編解碼方案。目前VP8已經(jīng)發(fā)展到了VP9。作為封裝格式的WebM具有.webm的后綴和video/webm的MIME類型。在音頻方面，可以使用Vorbis/Opus。從兼容性看，Chrome、Firefox、Opera對VP8的兼容性相當(dāng)理想，但是Safari和IE幾乎無法支持。

開源的****Ogg

Ogg幾乎與WebM相同，開源，被廣泛的在開源平臺支持。其視頻編碼方案稱為Theora(有VP3發(fā)展而來，由Xiph.org基金會開發(fā)，可被用于任何封裝格式)，音頻為Vorbis。后綴通常為.ogv或.ogg，MIME類型為video/ogg。在兼容性上，Chrome、Firefox、Opera能夠支持（但是Opera在移動平臺上無法支持），但是Safari和IE幾乎無法支持。

Html5****方案

以上的討論實際上的大前提是：視頻基于Html5的<video>方案。現(xiàn)在我們來總結(jié)一下兼容性：

|

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+

|
|

|
|

? Google Chrome 2011年宣布 放棄H.264, 但是“還沒兌現(xiàn)”。

|

可以看出現(xiàn)在主流的仍然是MP4(AVC)，但是為了解決“開源陣營”對AVC的搖擺不定，可以選擇利用video的多源方案，在AVC的基礎(chǔ)上額外提供對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>

瀏覽器會根據(jù)自己的偏好來選擇具體加載那種格式的流媒體文件，當(dāng)然服務(wù)端必須對同一個視頻提供多種格式的支持，具體可以這么做：

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

服務(wù)端推薦使用nginx，盡量注意MIME類型的配置正確

舊版本的****IE****和****flash

在html5流行之前，通用的視頻播放解決方案是flash和flv（flash從9開始支持h.264的mp4）。但是隨著ios設(shè)備的流行，flash已經(jīng)不是萬能藥了，越來越多的視頻網(wǎng)站提供多元的解決方案，而且偏向于html5：也就是說，通過檢測agent是否支持html5來決定使用video還是flash。在面對IE8以下的瀏覽器時，flash幾乎是唯一的選擇(silverlight的接受度普遍不高)。

當(dāng)然針對flash和flv的方案，也有多種實現(xiàn)方法，筆者能夠想到的有如下兩種：

  • 服務(wù)端根據(jù)agent的類型，輸出不同的html，如果支持html5就輸出video+mp4(avc)和webm（或者ogg），否則輸出flash相關(guān)的標(biāo)簽或腳本
  • 使用html5shiv和html5-video是IE也能夠支持video標(biāo)簽，并且使用Flash播放器來代替原生的video播放，參考
  • 將object內(nèi)嵌在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}}" />
  • <p>Download video as <a href="pr6.mp4">MP4</a>, <a href="pr6.webm">WebM</a>, or <a href="pr6.ogv">Ogg</a>.</p>
  • </object>

</video>

工具

  • 格式工廠是推薦的比較好的格式轉(zhuǎn)換工具，支持格式轉(zhuǎn)換、視頻分割、添加水印等，甚至可以用命令行和參數(shù)運(yùn)行，筆者發(fā)現(xiàn)百度云存儲提供視頻轉(zhuǎn)化和托管服務(wù)就是用的格式工廠做視頻轉(zhuǎn)化的。但是目前為止，格式工廠不能支持webm和ogg。
  • DVDVideoSoft Free Studio界面比較酷，功能也比較強(qiáng)大，更重要的是其能夠支持webm。
  • ffmpeg是一個開源的跨平臺的提供視頻和音頻轉(zhuǎn)化的解決方案，其中包括一個可用的轉(zhuǎn)化工具（命令行形式），和一些可擴(kuò)展和調(diào)用的類庫，對于對視頻有自動化轉(zhuǎn)化和深度定制需求的用戶是不錯的選擇。
  • ffmpeg2theora可以有效的對ffmpeg在theora上的補(bǔ)充，也是基于命令行執(zhí)行
  • HandBrake 支持命令行和GUI，作為ffmpeg的補(bǔ)充，進(jìn)行H.264的轉(zhuǎn)化
  • Miro Video Converter也是一款開源的視頻轉(zhuǎn)化軟件，對各種設(shè)備和格式的支持都很不錯，有mac版和windows版，推薦mac用戶使用。

http://diveintohtml5.info/video.html

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容