網頁中添加視頻、聲音、動畫等，可以增強用戶體驗。在HTML5之前，為網頁添加多媒體的唯一辦法，就是使用第三方的插件（如，Adobe Flash等）。

HTML5中，提供了對多媒體的原生支持，只需通過 video 元素，就可以向網頁嵌入視頻、電影或音頻資源，通過 audio 元素向網頁嵌入音頻資源，省時省力。

一、視頻

在HTML5時代，在網頁中嵌入視頻非常簡單，只需要一個 video 元素，并設置它的 src 屬性，使其鏈接一個視頻地址就可以完全搞定了，這個太esay了

<video src="media/vedio.mp4"></video>

把這個網站在IE8中打開一看，網站上除了一片空白外，什么也沒有，這是為什么呢？

原來 video 是HTML5最新引入的元素，并不是所有瀏覽器都支持它，IE8及以下版本都無法識別 video 標簽。如果瀏覽器不識別 video標簽，則會忽略它，當做什么都沒有。這就是網站上一片空白的原因。

這個問題好解決，只需在 video 標簽之間放置文本信息，不支持 video 標簽的老瀏覽器，會顯示 video 標簽之間的文本信息，以提示用戶瀏覽器不支持 video，就這么簡單！

<video src="media/vedio.mp4">

你的瀏覽器已經老掉牙了，不支持video，還不趕快使用現代瀏覽器O(∩_∩)O~！

</video>

在IE8上打開一看，確實顯示了提示文本，這下好多了，至少用戶知道自己的瀏覽器不能播放視頻，該換瀏覽器了。

下載了Opera瀏覽器的最新版本25.0，打開一看，怎么還是一片空白外！Opera瀏覽器明明是支持video標簽的，那又是為什么呢？

這個就得從視頻的編碼格式說起了。video 元素支持三種視頻格式：Ogg、MP4、WebM。

Ogg是帶有Theora視頻編碼和Vorbis音頻編碼的文件，后綴名為 .ogg；MP4是帶有H.264視頻編碼和AAC音頻編碼的MP4文件，后綴名為 .mp4；WebM是VP8視頻編碼和Vorbis音頻編碼的文件，后綴名為 .webm。

這個Opera瀏覽器呢，它可以支持ogg，但不支持mp4。由于Opera支持video標簽，故video標簽之間的文本信息沒有顯示出來，但它不支持ogg，所以就不進行播放，最終導致頁面出現一片空白。這下可怎么辦呢？

其實辦法有的是，我們可以從網上下載一副圖像，放到視頻播放窗口，如果視頻無法播放，就顯示這張圖片，是不是更好呢？從網上下載一張美女圖片，干脆叫beauty.jpg吧。那這個圖像怎么添加到視頻窗口呢？

video標簽有個poster 屬性，就是專門在視頻窗口放置圖片的。poster是一個video的占位符，無論什么情況下，只要視頻還沒有播放（視頻下載過程中、視頻不存在、不支持該視頻類型、用戶點擊播放按鈕前），就會顯示該圖像，可以看做是視頻播放之前插入的宣傳畫或海報。

<video src="media/vedio.mp4" poster = "img/beauty.jpg">

你的瀏覽器已經老掉牙了，不支持video，還不趕快使用現代瀏覽器O(∩_∩)O~！

</video>

在Opera瀏覽器上刷新一下，真的有一個美女沖著自己微笑呢。雖然視頻沒有播放出來，這回心情卻是好多了。

那我可不能一天到晚只看美女呀，視頻還是還是要想辦法播放出來的。既然Opera瀏覽器不支持mp4，我們就換成需要ogg吧，這樣就肯定沒問題了。

我想了想，這個辦法不好，萬一某個瀏覽器只支持支持ogg，不支持mp4呢。這年頭，什么都缺，就是不缺點子，隨便在網上一搜，辦法就有了。

在 video 元素中添加 source 元素，就可以解決這個問題。在source 元素中，通過 src 屬性指定視頻的地址，通過 type 屬性指定視頻的類型，以幫助瀏覽器決定是否能播放該視頻。并且，在 video 元素中可以添加任意多個source 元素，讓不同的 source 元素鏈接到不同的視頻文件。

這樣的話，當瀏覽器發現 video 元素時，首先會查看它本身是否定義了 src 屬性。如果沒有，就會檢查 source 元素。瀏覽器會逐個查看這些視頻源，直到找到一個可以播放的視頻。一旦找到，就會播放它并忽略其他的視頻源。我們干脆添加兩個source，一個是mp4，一個是ogg，這下視頻是一定能播放出來了。

<video poster = "img/beauty.jpg">

<source src="media/vedio.mp4" type="video/mp4">

<source src="media/vedio.ogg" type="video/ogg">

你的瀏覽器已經老掉牙了，不支持video，還不趕快使用現代瀏覽器O(∩_∩)O~！

</video>

在Opera瀏覽器上又刷新一下，只有美女沖著我微笑，視頻還是沒播放出來。唉，太粗心了，忘記添加播放視頻的控件了。

在video標簽中，通過添加controls 屬性來為視頻添加播放控件，方便用戶執行播放、暫停操作和音量控制。

<video poster = "img/beauty.jpg" controls>

（此處略去500字…）

</video>

在Opera瀏覽器上又刷新一下，效果真的不一樣，這次不僅看到美女，還看到了視頻控件。用鼠標猛戳一下那個播放按鈕，哈哈，不錯，真的聽到美妙的旋律。我們的ogg文件，終于播放出來了，讓我們好好享受一下吧O(∩_∩)O。

聽了一會，忽然一想，不對呀，我剛才點了播放按鈕后，等了半天才聽到聲音。能不能我一點播放按鈕，就立即播放呢？

原來視頻也是需要下載緩存的，點擊播放按鈕后，首先緩存，然后才播放的。那能不能在頁面加載的同時就緩存呢。這樣，用戶點擊播放后，就不必等待了。

這當然可以，在video標簽中，通過添加preload屬性來為視頻添加預加載功能，在頁面加載的同時加載視頻。

<video poster = "img/beauty.jpg" controls preload>

（此處略去500字…）

</video>

關于 preload 屬性，稍微再啰嗦一點，就是可以把它設置為 metadata，讓瀏覽器僅僅預加載視頻的基本信息，如尺寸、時長、以及一些關鍵的幀。這樣的話，在開始播放之前，瀏覽器可以提前計算視頻的顯示尺寸。

既然一切都OK了！讓我們看看mp4是不是能正常播放。下載最新版的Google Chrome 38.0瀏覽器，打開網頁，猛戳一下播放按鈕。

等等~，等等~，不對，怎么只有聲音沒有畫面，明明是mp4格式的文件呀？使用暴風影音試了一下，是有畫面的呀！

辛辛苦苦又在網上搜了一番，花了整整586秒，終于找到了答案。mp4視頻需要h.264編碼格式才會有圖像的。

找了一個 h.264 編碼格式的 mp4 試了一下，不錯，確實有圖像了！看了半天，原來是一部老外的電影，嘰里咕嚕一陣，一句話也沒聽懂。那O(∩_∩)O~，能否提供中文字幕呢，這樣就不必費老大勁去聽了！

HTML5中，通過在video元素添加track元素為視頻添加字幕。字幕文件有兩種格式：WebVTT和TTML。WebVTT是Web視頻文本軌跡（Web Video Text Track），是UTF-8編碼格式的文本文件；TTML是時序文本標記語言（Timed Text Markup Language），是XML格式的文件。兩種文件的具體格式，已經超出我們的討論范圍。

video元素支持添加多個track元素，不同的track元素鏈接到不同的字幕文件。用戶可以在各個字幕間進行切換。

<video poster = "img/beauty.jpg" controls preload>

<track src="en_track.vtt" kind="subtitles" srclang="en" label="English" default>

<track src="cn_track.vtt" kind="captions" srclang="zh" label="簡體中文">

</video>

track元素中，src屬性指定字幕文件的URL；srclang屬性字幕文件的語言類型，若kind 屬性值是 "subtitles" 時，該屬性必需的；label 屬性指定字幕標簽，每個字幕元素必需設置一個唯一不重復的標簽，切換字幕時，會顯示標簽的名稱；kind指定字幕內容類型，只能是subtitles、captions、descriptions、chapters、metadata 之一；default屬性指定是否是默認字幕，如果一個都沒指定，將不會自動顯示字幕。

除了字幕外，我還希望對視頻進行過多的控制，比如讓視頻自動播放、循環播放、默認靜音，以及視頻窗口的尺寸等等，這些都能做到嗎？

這已經不是什么事了，video 元素已經提供了相關屬性，根據需要設置相應的屬性就可以了。這些屬性及含義見表 23：

哦，原來這么簡單呀！那就到此為止吧，網頁中嵌入視頻的全部代碼都在這里，就打包給你吧！

<video width="300" poster="img/beauty.jpg" controls preload autoplay loop muted>

<source src="media/vedio.mp4">

<source src="media/vedio.ogg">

<track src="en_track.vtt" kind="subtitles" srclang="en" label="English" default>

<track src="cn_track.vtt" kind="captions" srclang="zh" label="簡體中文">

你的瀏覽器已經老掉牙了，不支持video，還不趕快使用現代瀏覽器O(∩_∩)O~！

</video>

睜大眼睛一看，卻只有7行代碼。然而，就這區區7行代碼，可把他折磨得夠嗆。

看著這一切都全部搞定，他仰望著天空，長長呼了一口氣，顯得是那么的放松，那么的愜意。此時，他閉上眼睛，在自己的夢幻世界里遨游！

二、音頻

有了在網頁中嵌入視頻的經歷，要在網頁中嵌入音頻，那簡直就是小菜一碟了。只要把vedio元素換成 audio 元素，就全部搞定。

但需要了解的是，audio 所支持的音頻格式只有Ogg Vorbis、mp3 和 wav。還要知道，由于音頻沒有畫面，也就沒有 width、height、poster 屬性，而其他屬性都支持，并且跟視頻的含義相同。

網頁中嵌入音頻的代碼如下：

<audio controls preload autoplay loop muted>

<source src="media/audio.mp3">

<source src="media/audio.wav">

<source src="media/audio.ogg">

你的瀏覽器已經老掉牙了，不支持audio，還不趕快使用現代瀏覽器O(∩_∩)O~！

</audio>

頻、視頻的格式

開始學習之前，我們要下載些素材用來測試使用，地址如下：https://pan.baidu.com/s/1reRWno0ibYRcYXjw4MClqw

提取碼：td80

其中包括兩個視頻一個音頻和一個安裝程序。

學習如何在頁面中添加音頻、視頻之前應該了解一點基礎知識。

我們應該都有在互聯網上下載電影、視頻、音樂的經歷，大家會注意到，有的視頻文件名的后綴是.avi，有的視頻是.mp4，還有.mov的，據不完全統計，常見的各種視頻格式有十幾種之多。

常見的音頻的格式比起視頻來會顯得少一些，一般是.wav和.mp3格式。

為什么存儲相同的內容可以有這么多不同的格式呢？

格式產生的核心在于對音頻、視頻等多媒體文件進行的不同編碼方式。

那什么是編碼呢？

簡單來說我們可以把"編碼"這個詞分成兩個部分，第一個是"編"，也就是"整理、組織"的意思，第二個是"碼"，也就是我們平時所說的"數碼"。

首先說"碼"，我們的計算機中的數據最終都是通過二進制的數字（0和1）來存儲或計算的，這些0或1就是數碼。無論代碼、程序、圖片、音樂、視頻、文字等的存儲與計算都不例外。不管多么復雜或簡單的文件，在計算機看來，都是一大堆0和1。

一個0或1被稱為1比特，圖片或視頻中的一個黑白像素通常是8比特（八位），如果一張1080乘720個像素的圖片所占內存的大小就是1080*720*8=6220800字節，約等于0,74mb。如果一個視頻每秒中有25幀，也就是一秒鐘在我們眼前閃過25張圖片（視頻播放實際上就是在我們眼前快速的更替圖片，這些圖片在大腦中會被自動連成動作，這也是小的時候在課本的角上畫好一套走路的小人的不同動作后，快速翻動書頁，畫面中的小人會走路的原因，大家可以自行百度"視覺暫留原理"）。

一秒鐘25張1080乘720的圖片的視頻，一秒鐘就會占0.74*25=18.5mb的內存。如果是一分鐘呢，18.5*60=1110mb約等于1.08gb。這樣的數據量是不是很嚇人。

但事實上我們下載的1080*720的一小時三十分鐘左右的視頻的體積往往也沒有超過1gb，這又是為什么呢？

這就是"編"的功勞！對數碼進行整理和組織的主要目的是壓縮體積，壓縮數據體積既能節省磁盤又能方便傳播與攜帶，是信息技術的關鍵技術之一，壓縮的方法一般有兩類，一類叫做無損壓縮，也就是通過對這一大堆數碼進行一個特殊的組合使其占有更小的空間，一類叫做有損壓縮，是在無損壓縮的基礎上剔除掉人眼睛識別不到的冗余信息。具體的壓縮過程涉及到很多數學知識，這里大家簡單了解一下即可。

壓縮后的視頻或音頻文件最終通過播放器對該文件的壓縮算法進行逆向運算后，還原成計算機可以解讀的畫面和聲音再呈現給觀眾，這個過程叫做"解碼"。

通過"編"的方式壓縮文件體積，通過"解"的方式再還原出文件內容成了處理大規模數據的通用手法。

不同的編碼和解碼方式催生出不同的文件格式，這種情況下，瀏覽器在播放視頻的時候就要有應對不同格式的不同解碼方式，在15年以前，瀏覽器為了能夠播放不同格式的視頻，就要調用電腦中不同的播放器，這個過程的寫法非常麻煩。隨著技術不斷地整合，時至今日，在頁面中播放視頻不需要這么復雜的寫法了，但是因為每個瀏覽器都不是包打一切，因此，雖然不用指定播放器，但是也要預設不同格式的視頻來應對不同的瀏覽器。

因此，我們在這一部分的學習中除了講解如何向頁面添加不同格式的音視頻外還會告訴大家如何為音視頻轉換格式。

為頁面添加音頻、視頻

添加音頻使用<audio></audio>標簽，這個標簽被所有瀏覽器支持，是html5推薦的音頻導入標簽，但是遺憾的是在html4標準中是不被支持的或者說是非法的。

這里給大家簡要介紹一下html5和html4的區別。

簡單來說呢，一個html文件的第一條語句是<!DOCTYPE HTML>，它就是HTML5標準的文件。如果是html4，它的第一條聲明語句有三種寫法，像這樣

一：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

二：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

三：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

版權聲明：本文為CSDN博主「痦子」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。

原文鏈接：https://blog.csdn.net/yh1061632045/article/details/81518141

這讓我想到了孔乙己的"茴"字的多種寫法

是不是很麻煩，其實html5比html4更簡單，功能更強大，而且我們一直以html5的標準進行學習，所以大家不必糾結。

下面我們導入一個音頻試試吧。示例代碼如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>音視頻導入</title>
  </head> 
  <body>
  <audio controls="controls"> 
    <source src="audio/千年的祈禱.mp3" type="audio/mp3" />
  </audio>
  </body> 
  </html>

頁面效果如下：

其中controls屬性就是用來顯示播放控制界面的，就是這個：（偷懶的話可以寫成"controls"就ok，不必加"="以及后面的內容了。）

如果以后您使用自己編寫的控制界面，就可以不添加這個屬性。

刪掉這個屬性后就是這樣：這樣為自定義的播放控制界面留出了位置。

<audio></audio>標簽夾著<source>標簽，一個<audio></audio>標簽中可以添加多個<source>用以支持不同的格式要求。示例代碼如下：（這段代碼來自w3school）

<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>

type屬性是告訴瀏覽器音樂文件的類型。

不同格式的文件的生成需要我們自己去做，這就涉及到如何給一個音頻文件進行格式轉化的問題。這個問題我們明天再說，今天先學習為頁面添加音頻和視頻。

下面我們來看一下視頻的導入方法，示例代碼如下：

<video controls> 
  <source src="video/阿塔麗.mp4" type="video/mp4" />
</video>

頁面效果如下:

我們可以通過設置height和width屬性來控制視頻的面積。實例代碼如下：

<video controls width="850" height="500" > 
  <source src="video/阿塔麗.mp4" type="video/mp4" />
</video>

頁面效果如下：

視頻畫面變小了，和視頻并排的是我們之前添加的音頻文件，由此可知，這兩個元素都是內聯元素。

今天的內容結束了，明天我們繼續學習格式轉換和為不同瀏覽器預設不同音視頻格式的方法。

如果您有任何疑問請給我留言，如有問題或錯誤請予以斧正！

HTML完整學習目錄

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>標簽實現文本內鏈接——零基礎自學網頁制作

級版HTML視頻教程（全網原創首發！）

什么是HTML?HTML指的是超文本標記語言，它是從事網頁設計工作的基礎，也是網站開發者必須熟練掌握的一門標記語言。應廣大學員的強烈要求，我愛自學網特推出《HTML基礎教程》，希望能得到廣大學員的支持。

學習交流

標 題

第一課：HTML語言框架和相關標簽95 1-1 學習html的前提和必要性53662 1-2 什么是HTML33819 1-3 HTML語言的整體框架135783 1-4 HTML語言的整體框架231727 1-5 行標簽和段標簽29866 1-6 文字屬性標簽28853 1-7 文字格式化標簽26888 1-8 body標簽27570 1-9 標題標簽25212

第二課：常用標簽代碼0 2-1 圖片37992 2-2 超鏈接127213 2-3 超鏈接223253 2-4 iframe標簽25784 2-5 橫線22900 2-6 列表22740 2-7 無序列表20544 2-8 有序列表21073 2-9 滾動標簽23217 2-10 轉義字符22227

第三課：表格標簽83 3-1 表格31370 3-2 表格屬性123819 3-3 表格屬性223066

您說說看 我發明的...是不是很牛逼呀[滑稽]

總 高級版學習資料文件高達10G?。。?/p>

總 高級版學習高清視頻資料的高達35G?。?！

需要的話我后期會更新，所以關注我，學到的好東西都是你自己的哦[滑稽]

那么大概內容就更新到這里

本教程后期會逐一更新高清視頻學習資料+超詳細的學習資料教程！

別忘了四連??！【點贊 收藏 關注 投幣】

我怕你到時候想找我都找不到了～[鮮花]

注：本人原創首發，未經允許禁止轉載/抄襲，如有違法，本人將有權追究法律責任?。?！