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

一、基本語法

代碼如下:

embed src=url

說明:embed可以用來插入各種多媒體伍掀,格式可以是 Midi括饶、Wav、AIFF洽胶、AU、MP3等等,Netscape及新版的IE 都支持姊氓。url為音頻或視頻文件及其路徑丐怯,可以是相對路徑或絕對路徑。

示例:

代碼如下:

<embed src="your.mid">

二翔横、屬性設置

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ī)定控制面板是否顯示族淮,默認值為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名惩、音量大小:

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

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

示例:

代碼如下:

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

6、容器屬性:

語法:height=# width=#

說明:取值為正整數(shù)或百分數(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艳汽、外觀設置:

語法:controls=console、smallconsole对雪、playbutton河狐、pausebutton、stopbutton慌植、volumelever 說明:該屬性規(guī)定控制面板的外觀甚牲。默認值是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ī)定控制面板和當前行中的對象的對齊方式斧散。

center:控制面板居中供常;

left:控制面板居左;

right:控制面板居右鸡捐;

top:控制面板的頂部與當前行中的最高對象的頂部對齊栈暇;

bottom:控制面板的底部與當前行中的對象的基線對齊;

baseline:控制面板的底部與文本的基線對齊箍镜;

texttop:控制面板的頂部與當前行中的最高的文字頂部對齊源祈;

middle:控制面板的中間與當前行的基線對齊;

absmiddle:控制面板的中間與當前文本或?qū)ο蟮闹虚g對齊色迂;

absbottom:控制面板的底部與文字的底部對齊香缺。

示例:

代碼如下:

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

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

   很多人將編碼和格式誤認為是同一個東西,往往以視頻文件的后綴來唯一確定視頻文件的支持程度歇僧。而事實上图张,用一句話來概括就是:視頻的文件后綴(假設沒有惡意修改后綴)實際上代表一種封裝格式,而視頻或者音頻的編碼[算法](http://lib.csdn.net/base/datastructure)與封裝格式本身無直接的關系:同樣的封裝格式(即同樣的后綴)可以封裝不同編碼算法的視頻和音頻诈悍。而視頻播放設備或軟件是否支持視頻的播放祸轮,不僅僅要看封裝格式,還要看編碼算法侥钳。認清這一點是理解和排查問題的基礎适袜。

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

從MPEG說起

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

MPEG-4規(guī)范規(guī)定了文件后綴名為.mp4详拙,目前包括三種圖像編碼和壓縮算法:Xvid\DivX\AVC(H.264)帝际,其中Xvid和DivX也可以統(tǒng)稱為MPEG-4 Part 2或者MPEG-4 Visual,而更為知名的H.264和AVC是相同的概念饶辙。音頻方面則是AAC蹲诀。以下關于兼容的內(nèi)容,來源于維基百科和格式工廠以及筆者的測試
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:還是由于許可的問題励负,F(xiàn)irefox和Opera逐漸動搖了對AVC的支持藕溅,筆者在最新的Firefox中測試AVC仍然可以播放(維基百科的解釋是可能與系統(tǒng)本身具有解碼器有關);至于DivX和Xvid熄守,筆者在Firefox下的測試結果是不支持蜈垮。從維基百科的兼容列表看,Opera對AVC支持的不好裕照。
IE:筆者的IE11能夠支持AVC,不支持DivX和Xvid

WebM的倡導
由于AVC(H.264)的授權問題调塌,以Chrome晋南、Firefox、Opera為首的開源陣營開始動搖對AVC的支持羔砾,盡管目前這些瀏覽器仍然能夠支持AVC负间,但是它們也傾向于一個叫做WebM的開源多媒體項目,該項目包括一個叫VP8的新的開源視頻編解碼方案姜凄。目前VP8已經(jīng)發(fā)展到了VP9政溃。作為封裝格式的WebM具有.webm的后綴和video/webm的MIME類型。在音頻方面态秧,可以使用Vorbis/Opus董虱。從兼容性看,Chrome申鱼、Firefox愤诱、Opera對VP8的兼容性相當理想,但是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)在我們來總結一下兼容性:
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,但是“還沒兌現(xiàn)”豁陆。

可以看出現(xiàn)在主流的仍然是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>

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

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已經(jīng)不是萬能藥了,越來越多的視頻網(wǎng)站提供多元的解決方案屯蹦,而且偏向于html5:也就是說维哈,通過檢測agent是否支持html5來決定使用video還是flash。在面對IE8以下的瀏覽器時登澜,flash幾乎是唯一的選擇(silverlight的接受度普遍不高)阔挠。
當然針對flash和flv的方案,也有多種實現(xiàn)方法脑蠕,筆者能夠想到的有如下兩種:

1.服務端根據(jù)agent的類型购撼,輸出不同的html,如果支持html5就輸出video+mp4(avc)和webm(或者ogg)空郊,否則輸出flash相關的標簽或腳本

2.使用html5shivhtml5-video是IE也能夠支持video標簽份招,并且

3.使用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>

工具

1.格式工廠 是推薦的比較好的格式轉換工具狞甚,支持格式轉換锁摔、視頻分割、添加水印等哼审,甚至可以用命令行和參數(shù)運行谐腰,筆者發(fā)現(xiàn)百度云存儲提供視頻轉化和托管服務就是用的格式工廠做視頻轉化的孕豹。但是目前為止,格式工廠不能支持webm和ogg十气。

2.DVDVideoSoft Free Studio 界面比較酷励背,功能也比較強大,更重要的是其能夠支持webm砸西。

3.ffmpeg 是一個開源的跨平臺的提供視頻和音頻轉化的解決方案叶眉,其中包括一個可用的轉化工具(命令行形式),和一些可擴展和調(diào)用的類庫芹枷,對于對視頻有自動化轉化和深度定制需求的用戶是不錯的選擇衅疙。

4.ffmpeg2theora 可以有效的對ffmpeg在theora上的補充,也是基于命令行執(zhí)行

5.HandBrake 支持命令行和GUI鸳慈,作為ffmpeg的補充饱溢,進行H.264的轉化

6.Miro Video Converter也是一款開源的視頻轉化軟件,對各種設備和格式的支持都很不錯走芋,有mac版和windows版绩郎,推薦mac用戶使用。

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末翁逞,一起剝皮案震驚了整個濱河市肋杖,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌挖函,老刑警劉巖兽愤,帶你破解...
    沈念sama閱讀 218,941評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異挪圾,居然都是意外死亡,警方通過查閱死者的電腦和手機逐沙,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,397評論 3 395
  • 文/潘曉璐 我一進店門哲思,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人吩案,你說我怎么就攤上這事棚赔。” “怎么了徘郭?”我有些...
    開封第一講書人閱讀 165,345評論 0 356
  • 文/不壞的土叔 我叫張陵靠益,是天一觀的道長。 經(jīng)常有香客問我残揉,道長胧后,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,851評論 1 295
  • 正文 為了忘掉前任抱环,我火速辦了婚禮壳快,結果婚禮上纸巷,老公的妹妹穿的比我還像新娘。我一直安慰自己眶痰,他們只是感情好瘤旨,可當我...
    茶點故事閱讀 67,868評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著竖伯,像睡著了一般存哲。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上七婴,一...
    開封第一講書人閱讀 51,688評論 1 305
  • 那天祟偷,我揣著相機與錄音,去河邊找鬼本姥。 笑死肩袍,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的婚惫。 我是一名探鬼主播氛赐,決...
    沈念sama閱讀 40,414評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼先舷!你這毒婦竟也來了艰管?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 39,319評論 0 276
  • 序言:老撾萬榮一對情侶失蹤蒋川,失蹤者是張志新(化名)和其女友劉穎牲芋,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體捺球,經(jīng)...
    沈念sama閱讀 45,775評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡缸浦,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,945評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了氮兵。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片裂逐。...
    茶點故事閱讀 40,096評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖泣栈,靈堂內(nèi)的尸體忽然破棺而出卜高,到底是詐尸還是另有隱情,我是刑警寧澤南片,帶...
    沈念sama閱讀 35,789評論 5 346
  • 正文 年R本政府宣布掺涛,位于F島的核電站,受9級特大地震影響疼进,放射性物質(zhì)發(fā)生泄漏薪缆。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,437評論 3 331
  • 文/蒙蒙 一颠悬、第九天 我趴在偏房一處隱蔽的房頂上張望矮燎。 院中可真熱鬧定血,春花似錦、人聲如沸诞外。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,993評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽峡谊。三九已至茫虽,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間既们,已是汗流浹背濒析。 一陣腳步聲響...
    開封第一講書人閱讀 33,107評論 1 271
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留啥纸,地道東北人号杏。 一個月前我還...
    沈念sama閱讀 48,308評論 3 372
  • 正文 我出身青樓,卻偏偏與公主長得像斯棒,于是被迫代替她去往敵國和親盾致。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,037評論 2 355

推薦閱讀更多精彩內(nèi)容