1. 程式人生 > >HTML embed標籤使用方法和屬性詳解

HTML embed標籤使用方法和屬性詳解

一、基本語法
 
程式碼如下:
 
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。以下關於相容的內容,來源於維基百科和格式工廠以及筆者的測試:

  • Android瀏覽器:支援DivX和AVC,Xvid應該不支援
  • iPhone和iPad(iOS):支援DivX和AVC,Xvid不支援
  • Chrome:支援AVC,不支援DivX和Xvid。谷歌曾在2011年初宣佈由於許可問題,將移除Chrome瀏覽器對AVC(H.264)的支援。但是直到目前的版本,AVC還在被支援。另外,實際測試下來,如果是DivX和AAC封裝在mp4中的話,chrome可以播放,但是隻有聲音(AAC)。
  • Firefox和Opera:還是由於許可的問題,Firefox和Opera逐漸動搖了對AVC的支援,筆者在最新的Firefox中測試AVC仍然可以播放(維基百科的解釋是可能與系統本身具有解碼器有關);至於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基金會開發,可被用於任何封裝格式),音訊為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+

‡ 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>

瀏覽器會根據自己的偏好來選擇具體載入那種格式的流媒體檔案,當然服務端必須對同一個視訊提供多種格式的支援,具體可以這麼做:

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

服務端推薦使用nginx,儘量注意MIME型別的配置正確

舊版本的IEflash

在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相關的標籤或指令碼
  • 使用html5shivhtml5-video是IE也能夠支援video標籤,並且使用Flash播放器來代替原生的video播放,參考
  • 將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}}" />
  •     <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>

工具

  • 格式工廠是推薦的比較好的格式轉換工具,支援格式轉換、視訊分割、新增水印等,甚至可以用命令列和引數執行,筆者發現百度雲端儲存提供視訊轉化和託管服務就是用的格式工廠做視訊轉化的。但是目前為止,格式工廠不能支援webm和ogg。
  • ffmpeg是一個開源的跨平臺的提供視訊和音訊轉化的解決方案,其中包括一個可用的轉化工具(命令列形式),和一些可擴充套件和呼叫的類庫,對於對視訊有自動化轉化和深度定製需求的使用者是不錯的選擇。
  • ffmpeg2theora可以有效的對ffmpeg在theora上的補充,也是基於命令列執行
  • HandBrake 支援命令列和GUI,作為ffmpeg的補充,進行H.264的轉化
  • Miro Video Converter也是一款開源的視訊轉化軟體,對各種裝置和格式的支援都很不錯,有mac版和windows版,推薦mac使用者使用。