音視頻格式轉(zhuǎn)換神器——格式工廠
如果您下載了上一篇《為HTML頁面添加音頻、視頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作》（目錄在結(jié)尾）中的素材，您會看到有這樣一個文件，如圖
這就是格式工廠軟件的安裝程序
建議大家在學(xué)習(xí)之前下載素材用以實(shí)踐，下載地址如下：https://pan.baidu.com/s/1reRWno0ibYRcYXjw4MClqw
提取碼：td80
因?yàn)楦袷焦S是免費(fèi)軟件，所以大家直接安裝就可以了，不需要序列號，安裝過程如下：
1.雙擊安裝程序
2.選擇安裝盤符
3.等待進(jìn)度條跑完就好了。大家注意，安裝時一定要閱讀提示，一些沒必要的捆綁軟件記得不要安裝！
完成安裝后，點(diǎn)擊"開始"菜單，如圖：
這樣我們就可以打開格式工廠了，打開后如圖：
通過這個菜單我們可知，這個軟件不僅可以為音頻、視頻轉(zhuǎn)換格式，還可以給圖片轉(zhuǎn)換格式。如圖：
下面我們就來操作一下如何為視頻轉(zhuǎn)換格式。
step1.點(diǎn)擊"視頻"
點(diǎn)擊后是這樣的，點(diǎn)擊"AVI FLV MOVE"這個區(qū)域。
效果如下，出現(xiàn)了一個新的菜單。
step2.選擇要轉(zhuǎn)換的格式，如圖，我們先選擇ogg，點(diǎn)擊！
點(diǎn)擊"確定"
彈出這樣一個菜單：
step3.選擇文件，如圖，點(diǎn)擊"添加文件"
我們使用"利維坦.mp4"這個文件進(jìn)行轉(zhuǎn)換，如圖：
點(diǎn)擊"打開"后，跳到這個界面，如下圖，然后點(diǎn)擊確定。
這時界面就跳回最初的界面上，如下圖，點(diǎn)擊開始，如紅框中。
step4.等待轉(zhuǎn)換完成，如圖所示：
然后點(diǎn)擊"輸出文件夾"按鈕找到轉(zhuǎn)換好的文件，如圖：
這時，我們可以把這個轉(zhuǎn)換好的文件拷走。
完成之后，大家可以按照上述步驟繼續(xù)轉(zhuǎn)換出swf、flv格式的視頻文件。
轉(zhuǎn)換音頻和視頻的步驟類似，大家可以在音頻欄中進(jìn)行選擇相應(yīng)格式并操作。
格式工廠除了音視頻格式轉(zhuǎn)換外，也具有簡單的圖片處理，視頻拼接，錄屏等功能，感興趣的小伙伴可以自行測試。
HTML中兼容不同瀏覽器的音視頻元素寫法
學(xué)過上一篇《》的小伙伴都會知道，目前音頻也好、視頻也好有非常多的格式存在，不同瀏覽器能支持的格式也不盡相同，就拿swf文件看，2019年以后版本的火狐瀏覽器就不再支持了（還可以通過一些特殊手段播放，這里指的是常規(guī)的html標(biāo)簽用法）。而chrome（google瀏覽器）在使用<embed>標(biāo)簽導(dǎo)入swf文件后就可以播放，示例代碼如下：
<!DOCTYPE HTML> <html> <head> <title>音視頻導(dǎo)入</title> <meta charset="utf-8"> </head> <body> <embed src="video/利維坦.swf" width="320" height="240" /> </body> </html>
在chrome中可以打開。不過要用戶允許使用flashplayer才行，如圖：
這時我們發(fā)現(xiàn)，在默認(rèn)情況下，播放器控制面板并沒有出現(xiàn)。
使用ie瀏覽器卻不能打開，因?yàn)獒槍wf文件，ie瀏覽器需要使用<object>標(biāo)簽。示例代碼如下：
<embed src="video/利維坦.swf" width="320" height="240" /><object data="video/利維坦.mp4" width="320" height="240"></object>
如圖所示：沒有正常顯示的是<embed>標(biāo)簽，打開的是<object>標(biāo)簽，并且有控制器。如圖：
實(shí)際上swf是個歷史遺留問題，<object>主要是針對ie瀏覽器來播放swf或其他需要flashplayer支持的視頻格式。<embed>的標(biāo)簽則用來解決非ie瀏覽器中播放swf或其他需要flashplayer支持的視頻格式。
而蘋果瀏覽器壓根就不支持swf這一類的文件。
目前網(wǎng)絡(luò)視頻格式基本上都統(tǒng)一為MP4格式了，在html5標(biāo)準(zhǔn)中，<video>標(biāo)簽頁取代了<object>和<embed>標(biāo)簽來播放視頻，同時支持多種格式選擇的代碼模式，示例代碼如下：
它的結(jié)構(gòu)是<video></video>標(biāo)簽中套入了多個<source/>標(biāo)簽來指定不同格式的文件，同時并列套入一個<object></object>標(biāo)簽，在<object></object>標(biāo)簽中再套入一個<embed>標(biāo)簽。這樣的寫法的目的是為了讓使用各種各樣的瀏覽器的用戶都可以打開視頻。這種寫法目前是html認(rèn)為的最好的寫法。
大家可以試一試，使用之前轉(zhuǎn)好的不同格式的視頻。
大家回想一下，導(dǎo)入不同格式音頻的寫法也是這個樣子，示例代碼如下：
<audio controls="controls"> <source src="song.ogg" type="audio/ogg" /> <source src="song.mp3" type="audio/mpeg" /> Your browser does not support the audio element.<!--你的瀏覽器不支持這個音頻元素--></audio>
其他的兼容方法
在w3school的說明中給出了一種包打一切的方法，說起來有點(diǎn)搞笑。
視頻的話，w3school建議可以上傳優(yōu)酷，然后使用這樣的代碼嵌入自己的頁面中，官方示例代碼如下：
<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf" width="480" height="400" type="application/x-shockwave-flash"></embed>
當(dāng)然也可以使用我們之前在《》這篇教程中講到的優(yōu)酷官方推薦的<iframe>標(biāo)簽的寫法。
音頻的話，可以調(diào)用免費(fèi)的在線雅虎播放器來播放，官方示例代碼如下：
首先使用一個<a>標(biāo)簽，使用href屬性指定音頻文件的路徑。然后使用<script></script>標(biāo)簽來啟東雅虎播放器的JavaScript程序來播放。這個<script>標(biāo)簽以后在學(xué)習(xí)JavaScript時，我們會經(jīng)常和它打交道，它的主要作用就是導(dǎo)入腳本。
出于好奇我試了試，代碼如下：
</video><a href="audio/千年的祈禱.mp3">Play Sound</a><script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script></body>
大家注意，<script>標(biāo)簽寫在</body>上面即可，也就是在頁面內(nèi)容的最下面，不必非要和<a>標(biāo)簽湊在一起。放在<head></head>中也可以！
頁面效果如下：
點(diǎn)擊"Play Sound"之后跳到這樣的界面：
最后給大家介紹一個導(dǎo)入字幕的方法，示例代碼如下：
<video width="320" height="240" controls="controls"> <source src="forrest_gump.mp4" type="video/mp4" /> <source src="forrest_gump.ogg" type="video/ogg" /> <track kind="subtitles" src="subs_chi.srt" srclang="zh" label="Chinese"> <track kind="subtitles" src="subs_eng.srt" srclang="en" label="English"></video>
其中的<track>標(biāo)簽就是導(dǎo)入字幕的標(biāo)簽，是一個html5中出現(xiàn)的新標(biāo)簽。屬性解釋如下：
因?yàn)闆]有配套的srt文件，因此這里就不演示了，大家了解一下，以后有機(jī)會再細(xì)致測試一下。
