整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
如果您下載了上一篇《為HTML頁面添加音頻、視頻的方法——零基礎自學網頁制作》（目錄在結尾）中的素材，您會看到有這樣一個文件，如圖
這就是格式工廠軟件的安裝程序
建議大家在學習之前下載素材用以實踐，下載地址如下：https://pan.baidu.com/s/1reRWno0ibYRcYXjw4MClqw
提取碼：td80
因為格式工廠是免費軟件，所以大家直接安裝就可以了，不需要序列號，安裝過程如下：
1.雙擊安裝程序
2.選擇安裝盤符
3.等待進度條跑完就好了。大家注意，安裝時一定要閱讀提示，一些沒必要的捆綁軟件記得不要安裝！
完成安裝后，點擊"開始"菜單，如圖：
這樣我們就可以打開格式工廠了，打開后如圖：
通過這個菜單我們可知，這個軟件不僅可以為音頻、視頻轉換格式，還可以給圖片轉換格式。如圖：
下面我們就來操作一下如何為視頻轉換格式。
step1.點擊"視頻"
點擊后是這樣的，點擊"AVI FLV MOVE"這個區域。
效果如下，出現了一個新的菜單。
step2.選擇要轉換的格式，如圖，我們先選擇ogg，點擊！
點擊"確定"
彈出這樣一個菜單：
step3.選擇文件，如圖，點擊"添加文件"
我們使用"利維坦.mp4"這個文件進行轉換，如圖：
點擊"打開"后，跳到這個界面，如下圖，然后點擊確定。
這時界面就跳回最初的界面上，如下圖，點擊開始，如紅框中。
step4.等待轉換完成，如圖所示：
然后點擊"輸出文件夾"按鈕找到轉換好的文件，如圖：
這時，我們可以把這個轉換好的文件拷走。
完成之后，大家可以按照上述步驟繼續轉換出swf、flv格式的視頻文件。
轉換音頻和視頻的步驟類似，大家可以在音頻欄中進行選擇相應格式并操作。
格式工廠除了音視頻格式轉換外，也具有簡單的圖片處理，視頻拼接，錄屏等功能，感興趣的小伙伴可以自行測試。
學過上一篇《》的小伙伴都會知道，目前音頻也好、視頻也好有非常多的格式存在，不同瀏覽器能支持的格式也不盡相同，就拿swf文件看，2019年以后版本的火狐瀏覽器就不再支持了（還可以通過一些特殊手段播放，這里指的是常規的html標簽用法）。而chrome（google瀏覽器）在使用<embed>標簽導入swf文件后就可以播放，示例代碼如下：
<!DOCTYPE HTML>
<html>
<head>
<title>音視頻導入</title>
<meta charset="utf-8">
</head>
<body>
<embed src="video/利維坦.swf" width="320" height="240" />
</body>
</html>在chrome中可以打開。不過要用戶允許使用flashplayer才行，如圖：
這時我們發現，在默認情況下，播放器控制面板并沒有出現。
使用ie瀏覽器卻不能打開，因為針對swf文件，ie瀏覽器需要使用<object>標簽。示例代碼如下：
<embed src="video/利維坦.swf" width="320" height="240" />
<object data="video/利維坦.mp4" width="320" height="240"></object>如圖所示：沒有正常顯示的是<embed>標簽，打開的是<object>標簽，并且有控制器。如圖：
實際上swf是個歷史遺留問題，<object>主要是針對ie瀏覽器來播放swf或其他需要flashplayer支持的視頻格式。<embed>的標簽則用來解決非ie瀏覽器中播放swf或其他需要flashplayer支持的視頻格式。
而蘋果瀏覽器壓根就不支持swf這一類的文件。
目前網絡視頻格式基本上都統一為MP4格式了，在html5標準中，<video>標簽頁取代了<object>和<embed>標簽來播放視頻，同時支持多種格式選擇的代碼模式，示例代碼如下：
它的結構是<video></video>標簽中套入了多個<source/>標簽來指定不同格式的文件，同時并列套入一個<object></object>標簽，在<object></object>標簽中再套入一個<embed>標簽。這樣的寫法的目的是為了讓使用各種各樣的瀏覽器的用戶都可以打開視頻。這種寫法目前是html認為的最好的寫法。
大家可以試一試，使用之前轉好的不同格式的視頻。
大家回想一下，導入不同格式音頻的寫法也是這個樣子，示例代碼如下：
<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的說明中給出了一種包打一切的方法，說起來有點搞笑。
視頻的話，w3school建議可以上傳優酷，然后使用這樣的代碼嵌入自己的頁面中，官方示例代碼如下：
<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf" width="480" height="400" type="application/x-shockwave-flash"></embed>當然也可以使用我們之前在《》這篇教程中講到的優酷官方推薦的<iframe>標簽的寫法。
音頻的話，可以調用免費的在線雅虎播放器來播放，官方示例代碼如下：
首先使用一個<a>標簽，使用href屬性指定音頻文件的路徑。然后使用<script></script>標簽來啟東雅虎播放器的JavaScript程序來播放。這個<script>標簽以后在學習JavaScript時，我們會經常和它打交道，它的主要作用就是導入腳本。
出于好奇我試了試，代碼如下：
</video>
<a href="audio/千年的祈禱.mp3">Play Sound</a>
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
</body>大家注意，<script>標簽寫在</body>上面即可，也就是在頁面內容的最下面，不必非要和<a>標簽湊在一起。放在<head></head>中也可以！
頁面效果如下：
點擊"Play Sound"之后跳到這樣的界面：
最后給大家介紹一個導入字幕的方法，示例代碼如下：
<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>標簽就是導入字幕的標簽，是一個html5中出現的新標簽。屬性解釋如下：
因為沒有配套的srt文件，因此這里就不演示了，大家了解一下，以后有機會再細致測試一下。
HTML序章（學習目的、對象、基本概念）——零基礎自學網頁制作
HTML是什么？——零基礎自學網頁制作
第一個HTML頁面如何寫？——零基礎自學網頁制作
HTML頁面中head標簽有啥用？——零基礎自學網頁制作
初識meta標簽與SEO——零基礎自學網頁制作
HTML中的元素使用方法1——零基礎自學網頁制作
HTML中的元素使用方法2——零基礎自學網頁制作
HTML元素中的屬性1——零基礎自學網頁制作
HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作
使用HTML添加表格1（基本元素）——零基礎自學網頁制作
使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作
使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作
使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網頁制作
16進制顏色表示與RGB色彩模型——零基礎自學網頁制作
HTML中的塊級元素與內聯元素——零基礎自學網頁制作
初識HTML中的<div>塊元素——零基礎自學網頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作
封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作
HTML表單元素初識1——零基礎自學網頁制作
HTML表單元素初識2——零基礎自學網頁制作
HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作
HTML表單4（form的action、method屬性）——零基礎自學網頁制作
HTML列表制作講解——零基礎自學網頁制作
為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作
音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作
HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作
日，有不少的程序員問w3cschool這邊，前端開發應該怎么學?
有個小白程序員表示，自己走了很多彎路，學java開發沒學透不能就業，現在學前端又不知道如何下手，前后算起來浪費了不少的時間。
針對此問題，下面w3cschool就給程序員小伙伴們答疑解惑，并分享一些干貨。
前端有三架馬車你一定要學會“駕馭”，HTML+CSS+Javascript。
照目前看來，網上各種前端學習資料又多又雜，確實讓不少入門前端的小伙伴不知所措。要選什么學習資料?如何入門前端開發?
關于視頻的選擇，直接網上搜“30 Days to Learn HTML & CSS”這個視頻來看。
這個視頻是國外的前端開發特產，大小有1G多吧!
前端開發可以照前端開發的視頻進行實戰訓練，建議可以一邊開著NotePad++?，一邊看視頻，一邊敲代碼。
另外，可以用有道云，或者是印象筆記稍微做點記錄，這會加快你對html、css的學習。
當你咨詢了很多的前端工程師，他們都會推薦你從經典的w3cschool基礎教程開始，把上面的課程刷一遍。
通過前面兩步的學習，你基本上算是入門html啦。
但相信也會有些程序員覺得很枯燥，那不妨可以嘗試w3cschool新開發的html微課。
比如之前的《刀塔傳奇》，很多人每天刷副本都可以樂此不疲，因為游戲升級通關是比較有趣的。
w3cschool微課同樣采用了闖關刷副本的模式，你通過每天有趣的刷副本闖關，就可以掌握html重點的概念和編程技能。
會有些前輩會給你推薦《DOM編程藝術》、《Javascript權威指南》、《Javascript高級程序設計》、《鋒利的JQuery》等，但對于新手來說似乎略難。
不妨去看Head first html， xhtml & CSS這兩本簡直是神書，真心經典!
網頁中常見的多媒體文件包括音頻文件和視頻文件，對于在線音頻和視頻，我們往往都是使用embed標簽來插入。embed語法：
1 <embed src="”視頻地址”" type="”audio/x-pn-realaudio-plugin”"
2 console="”Clip1〃" controls="”ControlPanel,StatusBar”" height="”330〃"
3 width="”450〃" autostart="”true”" title="undefined">
<embed src="要播放的文件網址" ;="" autostart="true" loop="true" width="400"
height="350">
html中網頁中如何插入音頻和視頻？
舉例1：插入音頻文件
1 <title>插入音頻文件</title>
2
3
4 <embed src="media/西班牙舞曲.mp3" width="400px" height="80px">
在瀏覽器預覽效果如下：
說明：
我們可以看到，使用embed標簽插入音頻文件還會有一個播放界面，界面上有幾個簡單的功能按鈕。
舉例2：插入視頻文件
1 <title>插入音頻文件</title>
2
3
4 <embed src="media/小蘋果.wmv" width="400px" height="80px">
在瀏覽器預覽效果如下：
注意：
由于音頻和視頻文件比較大，所以在這里我們就不提供大家在線測試的功能。不過大家可以在自己計算機上面測試一下代碼。
使用embed標簽插入視頻，在瀏覽器我們也可以看到，瀏覽器提供了一個簡單的操作界面。embed標簽支持的視頻格式很多，大部分主流格式都支持。
embed標簽能支持大部分格式的視頻文件，反正主流的如.mp4、.avi、.rmvb等都支持。如果你使用embed標簽不能播放視頻，那就可能是你視頻格式有問題或者編碼有問題。你可以用格式工廠轉換一下格式。
以上就是html中網頁中如何插入音頻和視頻？
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
