一逛拱、基本語(yǔ)法
代碼如下:
embed src=url
說(shuō)明：embed可以用來(lái)插入各種多媒體敌厘，格式可以是 Midi、Wav朽合、AIFF俱两、AU、MP3等等曹步，Netscape及新版的IE 都支持宪彩。url為音頻或視頻文件及其路徑，可以是相對(duì)路徑或絕對(duì)路徑讲婚。
示例:
代碼如下:
<embed src="your.mid">
二尿孔、屬性設(shè)置
1、自動(dòng)播放：
語(yǔ)法：autostart=true筹麸、false
說(shuō)明：該屬性規(guī)定音頻或視頻文件是否在下載完之后就自動(dòng)播放活合。
true：音樂(lè)文件在下載完之后自動(dòng)播放；
false：音樂(lè)文件在下載完之后不自動(dòng)播放物赶。
示例：
代碼如下:
<embed src="your.mid" autostart=true>
<embed src="your.mid" autostart=false>
2白指、循環(huán)播放：
語(yǔ)法：loop=正整數(shù)、true酵紫、false
說(shuō)明：該屬性規(guī)定音頻或視頻文件是否循環(huán)及循環(huán)次數(shù)告嘲。
屬性值為正整數(shù)值時(shí)，音頻或視頻文件的循環(huán)次數(shù)與正整數(shù)值相同奖地；
屬性值為true時(shí)橄唬，音頻或視頻文件循環(huán)；
屬性值為false時(shí)参歹，音頻或視頻文件不循環(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、面板顯示：
語(yǔ)法：hidden=ture泽示、no
說(shuō)明：該屬性規(guī)定控制面板是否顯示缸血，默認(rèn)值為no蜜氨。
ture：隱藏面板械筛；
no：顯示面板捎泻。
示例：
代碼如下:
<embed src="your.mid" hidden=ture>
<embed src="your.mid" hidden=no>
4、開始時(shí)間：
語(yǔ)法：starttime=mm:ss（分：秒）
說(shuō)明：該屬性規(guī)定音頻或視頻文件開始播放的時(shí)間埋哟。未定義則從文件開頭播放笆豁。
示例：
代碼如下:
<embed src="your.mid" starttime="00:10">
5、音量大谐嗌蕖：
語(yǔ)法：volume=0-100之間的整數(shù)
說(shuō)明：該屬性規(guī)定音頻或視頻文件的音量大小闯狱。未定義則使用系統(tǒng)本身的設(shè)定。
示例：
代碼如下:
<embed src="your.mid" volume="10">
6抛计、容器屬性：
語(yǔ)法：height=# width=#
說(shuō)明：取值為正整數(shù)或百分?jǐn)?shù)哄孤，單位為像素。該屬性規(guī)定控制面板的高度和寬度吹截。
height：控制面板的高度瘦陈；
width：控制面板的寬度。
示例：
代碼如下:
<embed src="your.mid" height=200 width=200>
7波俄、容器單位：
語(yǔ)法：units=pixels晨逝、en
說(shuō)明：該屬性指定高和寬的單位為pixels或en。
示例：
代碼如下:
<embed src="your.mid" units="pixels" height=200 width=200>
<embed src="your.mid" units="en" height=200 width=200>
8懦铺、外觀設(shè)置：
語(yǔ)法：controls=console捉貌、smallconsole、playbutton冬念、pausebutton趁窃、stopbutton、volumelever 說(shuō)明：該屬性規(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、對(duì)象名稱：
語(yǔ)法：name=#
說(shuō)明：#為對(duì)象的名稱另假。該屬性給對(duì)象取名像屋，以便其他對(duì)象利用。
示例：
代碼如下:
<embed src="your.mid" name="video">
10边篮、說(shuō)明文字：
語(yǔ)法：title=#
說(shuō)明：#為說(shuō)明的文字己莺。該屬性規(guī)定音頻或視頻文件的說(shuō)明文字奏甫。
示例：
代碼如下:
<embed src="your.mid" title="第一首歌">
11、前景色和背景色：
語(yǔ)法：palette=color|color
說(shuō)明：該屬性表示嵌入的音頻或視頻文件的前景色和背景色凌受，第一個(gè)值為前景色阵子，第二個(gè)值為背景色，中間用 | 隔開胜蛉。color可以是RGB色（RRGGBB）也可以是顏色名挠进，還可以是transparent （透明）。
示例：
代碼如下:
<embed src="your.mid" palette="red|black">
12誊册、對(duì)齊方式：
語(yǔ)法：align=top领突、bottom、center案怯、baseline君旦、 left、right嘲碱、texttop金砍、middle、absmiddle悍汛、absbottom
說(shuō)明：該屬性規(guī)定控制面板和當(dāng)前行中的對(duì)象的對(duì)齊方式捞魁。
center：控制面板居中；
left：控制面板居左离咐；
right：控制面板居右谱俭；
top：控制面板的頂部與當(dāng)前行中的最高對(duì)象的頂部對(duì)齊；
bottom：控制面板的底部與當(dāng)前行中的對(duì)象的基線對(duì)齊宵蛀；
baseline：控制面板的底部與文本的基線對(duì)齊昆著；
texttop：控制面板的頂部與當(dāng)前行中的最高的文字頂部對(duì)齊；
middle：控制面板的中間與當(dāng)前行的基線對(duì)齊术陶；
absmiddle：控制面板的中間與當(dāng)前文本或?qū)ο蟮闹虚g對(duì)齊凑懂；
absbottom：控制面板的底部與文字的底部對(duì)齊。
示例：
代碼如下:
<embed src="your.mid" align=top>
<embed src="your.mid" align=center>
編碼與格式的誤區(qū)
很多人將編碼和格式誤認(rèn)為是同一個(gè)東西梧宫，往往以視頻文件的后綴來(lái)唯一確定視頻文件的支持程度接谨。而事實(shí)上，用一句話來(lái)概括就是：視頻的文件后綴（假設(shè)沒(méi)有惡意修改后綴）實(shí)際上代表一種封裝格式塘匣，而視頻或者音頻的編碼算法與封裝格式本身無(wú)直接的關(guān)系：同樣的封裝格式（即同樣的后綴）可以封裝不同編碼算法的視頻和音頻脓豪。而視頻播放設(shè)備或軟件是否支持視頻的播放，不僅僅要看封裝格式忌卤，還要看編碼算法扫夜。認(rèn)清這一點(diǎn)是理解和排查問(wèn)題的基礎(chǔ)。
封裝格式規(guī)定了視頻的所有內(nèi)容，包括圖像笤闯，聲音堕阔，字幕，系統(tǒng)控制等颗味，其中以圖像和聲音最為關(guān)鍵超陆。
從****MPEG****說(shuō)起
MPEG是一個(gè)定義視頻規(guī)格的國(guó)際組織，他們?cè)?jīng)推出的MPEG-1和MPEG-2實(shí)際上分別就是大家熟知的VCD和DVD脱衙，不過(guò)這都是遠(yuǎn)古的東西了侥猬。我們來(lái)看看跟本文主題有關(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)容屎债，來(lái)源于維基百科和格式工廠以及筆者的測(cè)試：
- Android瀏覽器：支持DivX和AVC仅政，Xvid應(yīng)該不支持
- iPhone和iPad（iOS）：支持DivX和AVC，Xvid不支持
- Chrome：支持AVC盆驹，不支持DivX和Xvid圆丹。谷歌曾在2011年初宣布由于許可問(wèn)題，將移除Chrome瀏覽器對(duì)AVC(H.264)的支持躯喇。但是直到目前的版本辫封，AVC還在被支持。另外廉丽，實(shí)際測(cè)試下來(lái)倦微，如果是DivX和AAC封裝在mp4中的話，chrome可以播放正压，但是只有聲音(AAC)欣福。
- Firefox和Opera：還是由于許可的問(wèn)題，F(xiàn)irefox和Opera逐漸動(dòng)搖了對(duì)AVC的支持焦履，筆者在最新的Firefox中測(cè)試AVC仍然可以播放（維基百科的解釋是可能與系統(tǒng)本身具有解碼器有關(guān)）拓劝；至于DivX和Xvid，筆者在Firefox下的測(cè)試結(jié)果是不支持嘉裤。從維基百科的兼容列表看郑临，Opera對(duì)AVC支持的不好。
- IE：筆者的IE11能夠支持AVC价脾，不支持DivX和Xvid
WebM****的倡導(dǎo)
由于AVC(H.264)的授權(quán)問(wèn)題牧抵，以Chrome、Firefox、Opera為首的開源陣營(yíng)開始動(dòng)搖對(duì)AVC的支持犀变，盡管目前這些瀏覽器仍然能夠支持AVC妹孙，但是它們也傾向于一個(gè)叫做WebM的開源多媒體項(xiàng)目，該項(xiàng)目包括一個(gè)叫VP8的新的開源視頻編解碼方案获枝。目前VP8已經(jīng)發(fā)展到了VP9蠢正。作為封裝格式的WebM具有.webm的后綴和video/webm的MIME類型。在音頻方面省店，可以使用Vorbis/Opus嚣崭。從兼容性看，Chrome懦傍、Firefox雹舀、Opera對(duì)VP8的兼容性相當(dāng)理想，但是Safari和IE幾乎無(wú)法支持粗俱。
開源的****Ogg
Ogg幾乎與WebM相同说榆，開源，被廣泛的在開源平臺(tái)支持寸认。其視頻編碼方案稱為Theora(有VP3發(fā)展而來(lái)签财，由Xiph.org基金會(huì)開發(fā)，可被用于任何封裝格式)偏塞，音頻為Vorbis唱蒸。后綴通常為.ogv或.ogg，MIME類型為video/ogg灸叼。在兼容性上神汹，Chrome、Firefox怜姿、Opera能夠支持（但是Opera在移動(dòng)平臺(tái)上無(wú)法支持）慎冤，但是Safari和IE幾乎無(wú)法支持。
Html5****方案
以上的討論實(shí)際上的大前提是：視頻基于Html5的<video>方案〔茁現(xiàn)在我們來(lái)總結(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+
|
|
- IE9 “只有當(dāng)用戶安裝了VP8的編解碼器時(shí)”才能支持VP8蚁堤。
|
|
? Google Chrome 2011年宣布 放棄H.264, 但是“還沒(méi)兌現(xiàn)”。
|
可以看出現(xiàn)在主流的仍然是MP4(AVC)但狭，但是為了解決“開源陣營(yíng)”對(duì)AVC的搖擺不定披诗，可以選擇利用video的多源方案，在AVC的基礎(chǔ)上額外提供對(duì)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>
瀏覽器會(huì)根據(jù)自己的偏好來(lái)選擇具體加載那種格式的流媒體文件立磁，當(dāng)然服務(wù)端必須對(duì)同一個(gè)視頻提供多種格式的支持呈队，具體可以這么做：
- 提供一個(gè)WebM的視頻版本（VP8+Vorbis）
- 提供一個(gè)MP4的視頻版本（H.264+AAC(low complexity)）
- 提供Ogg版本（Theora+Vorbis）
服務(wù)端推薦使用nginx，盡量注意MIME類型的配置正確
舊版本的****IE****和****flash
在html5流行之前唱歧，通用的視頻播放解決方案是flash和flv（flash從9開始支持h.264的mp4）宪摧。但是隨著ios設(shè)備的流行粒竖，flash已經(jīng)不是萬(wàn)能藥了，越來(lái)越多的視頻網(wǎng)站提供多元的解決方案几于，而且偏向于html5：也就是說(shuō)蕊苗，通過(guò)檢測(cè)agent是否支持html5來(lái)決定使用video還是flash。在面對(duì)IE8以下的瀏覽器時(shí)沿彭，flash幾乎是唯一的選擇(silverlight的接受度普遍不高)朽砰。
當(dāng)然針對(duì)flash和flv的方案，也有多種實(shí)現(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播放器來(lái)代替原生的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)百度云存儲(chǔ)提供視頻轉(zhuǎn)化和托管服務(wù)就是用的格式工廠做視頻轉(zhuǎn)化的恨锚。但是目前為止宇驾，格式工廠不能支持webm和ogg。
- DVDVideoSoft Free Studio界面比較酷猴伶，功能也比較強(qiáng)大课舍，更重要的是其能夠支持webm。
- ffmpeg是一個(gè)開源的跨平臺(tái)的提供視頻和音頻轉(zhuǎn)化的解決方案他挎，其中包括一個(gè)可用的轉(zhuǎn)化工具（命令行形式）筝尾，和一些可擴(kuò)展和調(diào)用的類庫(kù)，對(duì)于對(duì)視頻有自動(dòng)化轉(zhuǎn)化和深度定制需求的用戶是不錯(cuò)的選擇办桨。
- ffmpeg2theora可以有效的對(duì)ffmpeg在theora上的補(bǔ)充筹淫，也是基于命令行執(zhí)行
- HandBrake 支持命令行和GUI，作為ffmpeg的補(bǔ)充呢撞，進(jìn)行H.264的轉(zhuǎn)化
- Miro Video Converter也是一款開源的視頻轉(zhuǎn)化軟件损姜，對(duì)各種設(shè)備和格式的支持都很不錯(cuò)，有mac版和windows版殊霞，推薦mac用戶使用摧阅。
