整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
度搜索：Dreamweaver CC 網(wǎng)頁制作：[9]插入視頻-百度經(jīng)驗(yàn) (baidu.com)
<!doctype html>
<html><head><meta charset="utf-8"><title>插入視頻</title></head><body></body></html>
Firefox Quantum 最大的特點(diǎn)就是快，支持多核cpu，使用自家編程語言Rust寫了超快的CSS引擎，可以在多個(gè)CPU核心上并行，同時(shí)Firefox Quantum的外觀也有了變化，新的外觀更加時(shí)尚。
Macv.com
火狐量子瀏覽器下載完成后，雙擊.pkg文件，根據(jù)操作提示進(jìn)行安裝
Macv.com
1、查看器
檢視并優(yōu)化代碼，讓版面上每個(gè)像素都顯得完美。使用頁面查看器來查看和修改頁面的HTML和CSS。
2、控制臺(tái)
可以查看與當(dāng)前網(wǎng)頁相關(guān)的日志信息: 所有的網(wǎng)絡(luò)請(qǐng)求，JavaScript， CSS，和安全相關(guān)的錯(cuò)誤與警告信息，還包括頁面上 JavaScript 代碼運(yùn)行時(shí)產(chǎn)生的錯(cuò)誤、警告及相關(guān)信息.
可以激活你和網(wǎng)頁之間的交互, 使你可以在當(dāng)前網(wǎng)頁上下文中執(zhí)行一些 JavaScript 表達(dá)式.
3、調(diào)試器
JavaScript Debugger允許單步調(diào)試，進(jìn)入到你的Javascript代碼中審查并修改相應(yīng)的值，便于追蹤缺陷.
4、網(wǎng)絡(luò)
網(wǎng)絡(luò)監(jiān)視器顯示所有火狐瀏覽器發(fā)送的網(wǎng)絡(luò)請(qǐng)求（例如：加載網(wǎng)頁或者XMLHttpRequests請(qǐng)求），每個(gè)請(qǐng)求耗費(fèi)的時(shí)間，和每個(gè)請(qǐng)求的詳細(xì)信息。在"Web Developer"菜單選擇"Network"選項(xiàng)，打開網(wǎng)絡(luò)監(jiān)視器(對(duì)于MAC的火狐瀏覽器來說, 在"Tools"的子菜單),或者打開開發(fā)工具盒子,點(diǎn)擊"Network"標(biāo)簽。
詳細(xì)了解網(wǎng)絡(luò)監(jiān)視器
Macv.com
5、存儲(chǔ)面板
添加、修改或移除緩存、Cookie、數(shù)據(jù)庫、會(huì)話數(shù)據(jù)。
Macv.com
1、響應(yīng)式設(shè)計(jì)模式
響應(yīng)式設(shè)計(jì)采用不同的屏幕尺寸來呈現(xiàn)在各種設(shè)備（例如移動(dòng)電話或者平板電腦）下的可視情況。響應(yīng)式設(shè)計(jì)視圖使您可以很容易地看到您的網(wǎng)站或者網(wǎng)站app在不同屏幕尺寸下的外觀。
Macv.com
2、可視編輯
微調(diào)動(dòng)畫、對(duì)齊和填充。
3、性能
解決性能瓶頸、簡(jiǎn)化工作流程、優(yōu)化任務(wù)方式。
性能工具讓你深入了解你的網(wǎng)站的一般響應(yīng)性，JavaScript和布局性能。利用性能工具你可以創(chuàng)建你的網(wǎng)站在一段時(shí)間內(nèi)的一個(gè)記錄，或資料。然后此工具在資料里將瀏覽器渲染你的網(wǎng)站時(shí)所做的事情，和幀率圖展示給你。
詳細(xì)了解性能工具
4、內(nèi)存
內(nèi)存工具可以幫助你獲取當(dāng)前標(biāo)簽頁內(nèi)存堆的快照，它可以提供每個(gè)對(duì)象在內(nèi)存中的使用以及在你的代碼中哪里分配了內(nèi)存的堆視圖。
Macv.com
5、WEB 音頻
Web 音頻編輯器檢測(cè)創(chuàng)建于頁面中的音頻上下文環(huán)境，然后提供一個(gè)可視化的圖像，從高可視化角度幫助您查看 Web 音頻編輯器的操作，也使您能夠確認(rèn)每一個(gè)節(jié)點(diǎn)都與您的語預(yù)期連接在一起
6、代碼草稿紙
Scratchpad 使用JavaScript去提供一種實(shí)驗(yàn)環(huán)境。你能編寫，執(zhí)行代碼，并且查看代碼和Web頁面交互的結(jié)果和被設(shè)計(jì)為一次只能執(zhí)行單行命更多工具令的 Web Console 不同的是， Scratchpad 讓你可以編輯大段的Javascript代碼, 然后就取決于你希望如何輸出，有多種方式執(zhí)行這些代碼。
Macv.com
7、樣式編輯器
編輯和管理瀏覽器中的所有 CSS 樣式表。
如果您下載了上一篇《為HTML頁面添加音頻、視頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作》（目錄在結(jié)尾）中的素材，您會(huì)看到有這樣一個(gè)文件，如圖
這就是格式工廠軟件的安裝程序
建議大家在學(xué)習(xí)之前下載素材用以實(shí)踐，下載地址如下：https://pan.baidu.com/s/1reRWno0ibYRcYXjw4MClqw
提取碼：td80
因?yàn)楦袷焦S是免費(fèi)軟件，所以大家直接安裝就可以了，不需要序列號(hào)，安裝過程如下：
1.雙擊安裝程序
2.選擇安裝盤符
3.等待進(jìn)度條跑完就好了。大家注意，安裝時(shí)一定要閱讀提示，一些沒必要的捆綁軟件記得不要安裝！
完成安裝后，點(diǎn)擊"開始"菜單，如圖：
這樣我們就可以打開格式工廠了，打開后如圖：
通過這個(gè)菜單我們可知，這個(gè)軟件不僅可以為音頻、視頻轉(zhuǎn)換格式，還可以給圖片轉(zhuǎn)換格式。如圖：
下面我們就來操作一下如何為視頻轉(zhuǎn)換格式。
step1.點(diǎn)擊"視頻"
點(diǎn)擊后是這樣的，點(diǎn)擊"AVI FLV MOVE"這個(gè)區(qū)域。
效果如下，出現(xiàn)了一個(gè)新的菜單。
step2.選擇要轉(zhuǎn)換的格式，如圖，我們先選擇ogg，點(diǎn)擊！
點(diǎn)擊"確定"
彈出這樣一個(gè)菜單：
step3.選擇文件，如圖，點(diǎn)擊"添加文件"
我們使用"利維坦.mp4"這個(gè)文件進(jìn)行轉(zhuǎn)換，如圖：
點(diǎn)擊"打開"后，跳到這個(gè)界面，如下圖，然后點(diǎn)擊確定。
這時(shí)界面就跳回最初的界面上，如下圖，點(diǎn)擊開始，如紅框中。
step4.等待轉(zhuǎn)換完成，如圖所示：
然后點(diǎn)擊"輸出文件夾"按鈕找到轉(zhuǎn)換好的文件，如圖：
這時(shí)，我們可以把這個(gè)轉(zhuǎn)換好的文件拷走。
完成之后，大家可以按照上述步驟繼續(xù)轉(zhuǎn)換出swf、flv格式的視頻文件。
轉(zhuǎn)換音頻和視頻的步驟類似，大家可以在音頻欄中進(jìn)行選擇相應(yīng)格式并操作。
格式工廠除了音視頻格式轉(zhuǎn)換外，也具有簡(jiǎn)單的圖片處理，視頻拼接，錄屏等功能，感興趣的小伙伴可以自行測(cè)試。
學(xué)過上一篇《》的小伙伴都會(huì)知道，目前音頻也好、視頻也好有非常多的格式存在，不同瀏覽器能支持的格式也不盡相同，就拿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才行，如圖：
這時(shí)我們發(fā)現(xiàn)，在默認(rèn)情況下，播放器控制面板并沒有出現(xiàn)。
使用ie瀏覽器卻不能打開，因?yàn)獒槍?duì)swf文件，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是個(gè)歷史遺留問題，<object>主要是針對(duì)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)簽來播放視頻，同時(shí)支持多種格式選擇的代碼模式，示例代碼如下：
它的結(jié)構(gòu)是<video></video>標(biāo)簽中套入了多個(gè)<source/>標(biāo)簽來指定不同格式的文件，同時(shí)并列套入一個(gè)<object></object>標(biāo)簽，在<object></object>標(biāo)簽中再套入一個(gè)<embed>標(biāo)簽。這樣的寫法的目的是為了讓使用各種各樣的瀏覽器的用戶都可以打開視頻。這種寫法目前是html認(rèn)為的最好的寫法。
大家可以試一試，使用之前轉(zhuǎn)好的不同格式的視頻。
大家回想一下，導(dǎo)入不同格式音頻的寫法也是這個(gè)樣子，示例代碼如下：
<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.<!--你的瀏覽器不支持這個(gè)音頻元素-->
</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)的在線雅虎播放器來播放，官方示例代碼如下：
首先使用一個(gè)<a>標(biāo)簽，使用href屬性指定音頻文件的路徑。然后使用<script></script>標(biāo)簽來啟東雅虎播放器的JavaScript程序來播放。這個(gè)<script>標(biāo)簽以后在學(xué)習(xí)JavaScript時(shí)，我們會(huì)經(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"之后跳到這樣的界面：
最后給大家介紹一個(gè)導(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)簽，是一個(gè)html5中出現(xiàn)的新標(biāo)簽。屬性解釋如下：
因?yàn)闆]有配套的srt文件，因此這里就不演示了，大家了解一下，以后有機(jī)會(huì)再細(xì)致測(cè)試一下。
HTML序章（學(xué)習(xí)目的、對(duì)象、基本概念）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML是什么？——零基礎(chǔ)自學(xué)網(wǎng)頁制作
第一個(gè)HTML頁面如何寫？——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML頁面中head標(biāo)簽有啥用？——零基礎(chǔ)自學(xué)網(wǎng)頁制作
初識(shí)meta標(biāo)簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML元素中的屬性2（路徑詳解）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格1（基本元素）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格2（表格頭部與腳部）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格3（間距與顏色）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格4（行顏色與表格嵌套）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
16進(jìn)制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中的塊級(jí)元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作
初識(shí)HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作
封閉在家學(xué)網(wǎng)頁制作！為頁面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單元素初識(shí)1——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單元素初識(shí)2——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單3（下拉列表、多行文字輸入）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單4（form的action、method屬性）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁制作
為HTML頁面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作
音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中使用<a>標(biāo)簽實(shí)現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁制作
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
