整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
度搜索：Dreamweaver CC 網頁制作：[9]插入視頻-百度經驗 (baidu.com)
<!doctype html>
<html><head><meta charset="utf-8"><title>插入視頻</title></head><body></body></html>
Firefox Quantum 最大的特點就是快，支持多核cpu，使用自家編程語言Rust寫了超快的CSS引擎，可以在多個CPU核心上并行，同時Firefox Quantum的外觀也有了變化，新的外觀更加時尚。
Macv.com
火狐量子瀏覽器下載完成后，雙擊.pkg文件，根據操作提示進行安裝
Macv.com
1、查看器
檢視并優化代碼，讓版面上每個像素都顯得完美。使用頁面查看器來查看和修改頁面的HTML和CSS。
2、控制臺
可以查看與當前網頁相關的日志信息: 所有的網絡請求，JavaScript， CSS，和安全相關的錯誤與警告信息，還包括頁面上 JavaScript 代碼運行時產生的錯誤、警告及相關信息.
可以激活你和網頁之間的交互, 使你可以在當前網頁上下文中執行一些 JavaScript 表達式.
3、調試器
JavaScript Debugger允許單步調試，進入到你的Javascript代碼中審查并修改相應的值，便于追蹤缺陷.
4、網絡
網絡監視器顯示所有火狐瀏覽器發送的網絡請求（例如：加載網頁或者XMLHttpRequests請求），每個請求耗費的時間，和每個請求的詳細信息。在"Web Developer"菜單選擇"Network"選項，打開網絡監視器(對于MAC的火狐瀏覽器來說, 在"Tools"的子菜單),或者打開開發工具盒子,點擊"Network"標簽。
詳細了解網絡監視器
Macv.com
5、存儲面板
添加、修改或移除緩存、Cookie、數據庫、會話數據。
Macv.com
1、響應式設計模式
響應式設計采用不同的屏幕尺寸來呈現在各種設備（例如移動電話或者平板電腦）下的可視情況。響應式設計視圖使您可以很容易地看到您的網站或者網站app在不同屏幕尺寸下的外觀。
Macv.com
2、可視編輯
微調動畫、對齊和填充。
3、性能
解決性能瓶頸、簡化工作流程、優化任務方式。
性能工具讓你深入了解你的網站的一般響應性，JavaScript和布局性能。利用性能工具你可以創建你的網站在一段時間內的一個記錄，或資料。然后此工具在資料里將瀏覽器渲染你的網站時所做的事情，和幀率圖展示給你。
詳細了解性能工具
4、內存
內存工具可以幫助你獲取當前標簽頁內存堆的快照，它可以提供每個對象在內存中的使用以及在你的代碼中哪里分配了內存的堆視圖。
Macv.com
5、WEB 音頻
Web 音頻編輯器檢測創建于頁面中的音頻上下文環境，然后提供一個可視化的圖像，從高可視化角度幫助您查看 Web 音頻編輯器的操作，也使您能夠確認每一個節點都與您的語預期連接在一起
6、代碼草稿紙
Scratchpad 使用JavaScript去提供一種實驗環境。你能編寫，執行代碼，并且查看代碼和Web頁面交互的結果和被設計為一次只能執行單行命更多工具令的 Web Console 不同的是， Scratchpad 讓你可以編輯大段的Javascript代碼, 然后就取決于你希望如何輸出，有多種方式執行這些代碼。
Macv.com
7、樣式編輯器
編輯和管理瀏覽器中的所有 CSS 樣式表。
如果您下載了上一篇《為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>標簽實現文本內鏈接——零基礎自學網頁制作
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
