HTML5 中，雖然 <video> 標簽可以播放視頻，但瀏覽器對視頻格式的支持卻因廠商和版本的不同而異。這就是為什么我們需要使用 <source> 標簽的原因。通過嵌套多個 <source> 標簽，我們可以為瀏覽器提供多種視頻格式，以確保在不同的瀏覽器中都能順利播放。

當使用 <source> 標簽時，瀏覽器會自動檢查每個源，選擇其支持的第一個格式進行播放。例如：

<video controls>
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
  <p>您的瀏覽器不支持 HTML5 視頻。</p>
</video>

在上面的示例中，瀏覽器首先嘗試播放 WebM 格式的視頻。如果不支持 WebM，它將嘗試播放 MP4 格式的視頻。如果兩者都不支持，瀏覽器將顯示一條消息告知用戶。

使用 <source> 標簽的另一個好處是，它允許我們為不同的網絡條件或設備提供不同的視頻質量。例如，我們可以為高分辨率屏幕提供高清視頻，而為低分辨率屏幕提供較低質量的視頻。

總之，雖然 <video> 標簽可以播放視頻，但使用 <source> 標簽可以確保更好的兼容性和靈活性，以適應各種瀏覽器和設備。

網頁中添加視頻、聲音、動畫等，可以增強用戶體驗。在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>

讀：您在智能手機，計算機，電視或平板電腦上觀看的任何視頻剪輯都具有特定類型的文件格式。 如果您希望視頻在任何平臺上都能正常播放，則必須了解每種視頻格式的工作原理。 例如，用于Web開發的視頻格式將不同于您用于社交媒體的格式。 繼續閱讀以了解如何為您選擇正確的格式。

首先讓我們了解一下什么是視頻文件格式？

1.容器和編解碼器是任何視頻文件的兩個組成部分。 視頻格式是存儲音頻，視頻，字幕和任何其他源數據的容器。 編解碼器對諸如音頻和視頻之類的多媒體數據進行編碼和解碼。

2.創建視頻時，視頻編解碼器對視頻進行編碼和壓縮，而音頻編解碼器對聲音也是如此。 之后，編碼的視頻和音頻將同步并存儲在媒體容器（文件格式）中。

下面我分別介紹一下8種常見的視頻文件格式，編解碼器和容器

1. MP4

MPEG-4 Part 14或MP4是2001年推出的最早的數字視頻文件格式之一。大多數數字平臺和設備都支持MP4。 MP4格式可以存儲音頻文件，視頻文件，靜止圖像和文本。 此外，MP4提供高質量的視頻，同時保持相對較小的文件大小。

2. MOV

MOV是蘋果設計的一種流行的視頻文件格式。 它旨在支持QuickTime播放器。 MOV文件包含視頻，音頻，字幕，時間碼和其他媒體類型。 它適用于Mac和Windows的不同版本的QuickTimePlayer。 由于它是一種非常高質量的視頻格式，因此MOV文件在計算機上會占用更多的存儲空間。

3. WMV

WMV視頻格式由Microsoft設計，并廣泛用于Windows媒體播放器中。 WMV格式可提供比MP4更好的壓縮小文件。 這這個優勢使它在在線視頻流中很受歡迎。 盡管它與蘋果設備不兼容，但用戶可以為iPhone或Mac下載Windows Media Player。

4. FLV

FLV是Adobe Flash Player使用的文件格式。 它支持所有視頻平臺和瀏覽器，并且使用相當廣泛，是用途最廣泛的視頻格式之一。 FLV格式是YouTube等在線視頻流媒體平臺的理想選擇。 它們的文件大小相對較小，因此易于下載。 唯一的缺點是它與許多移動設備（如iPhone）不兼容。

5. AVI

AVI文件格式是Microsoft于1992年引入的，如今仍被廣泛使用。 AVI視頻格式使用的壓縮比其他視頻格式（例如MPEG或MOV）少。 這將導致非常大的文件大小，每分鐘視頻大約2-3 GB。 對于存儲空間有限的用戶來說可能是個問題。 您也可以創建AVI視頻文件而無需任何壓縮，這使文件無損。 無論您打開或保存文件多少次，無損文件都不會隨著時間的流逝失去其質量。 此外，這省去了在視頻播放器中使用編解碼器。

6. AVCHD（高級視頻編碼）

AVCHD是用于高清視頻播放和數字錄制的格式。 這種視頻格式是由Panasonic和Sony設計的，用于專業高清視頻錄制。 通過利用H.264 / MPEG-4視頻壓縮技術，AVCHD還使您僅使用少量數據就可以存儲數小時的高質量視頻。 此外，AVCHD 2.0格式的最新版本支持三維視頻存儲。

7. WebM

WebM由Google于2010年首次引入，是一種開放源代碼視頻格式，是在考慮互聯網當前和未來狀態的基礎上開發的。 WebM適用于HTML5。 WebM的視頻編解碼器只需很少的計算機功能即可壓縮和解壓縮文件。 此設計的目的是使幾乎所有設備（例如平板電腦，臺式機，智能手機或智能電視等設備）上的在線視頻流式傳輸成為可能。

8. MKV

MKV文件格式在單個文件中合并了音頻，視頻和字幕。 MKV格式是為了將來的使用而開發的，這意味著視頻文件將始終保持更新。 MKV容器幾乎支持任何視頻和音頻格式，從而使該格式具有高度自適應性，與易用性。

結論—如何選擇視頻文件格式

您應該根據視頻質量要求選擇文件格式。 視頻應達到所需的質量，但不止于此。 高質量的視頻很難下載，轉換，共享和管理。 另外，您需要考慮如何查看視頻文件。 并非所有的瀏覽器，程序和設備都可以播放特定的視頻格式。

選擇視頻格式之前，請考慮以下情況：

1.對于在線視頻，請選擇大多數網絡瀏覽器支持的文件格式。 這樣，您的視頻將在瀏覽器上本地播放。 MP4和WEBM是與瀏覽器兼容的視頻格式。

2.對于家庭視頻錄像，請選擇高質量的視頻格式，以備將來使用。 開源文件格式比企業控制的專有格式更具面向未來性。 MP4或AVI格式非常適合該類別。

3.對于Windows應用程序，請選擇與Windows兼容的格式。 在這種情況下，WMV是一個不錯的選擇。

本文由Victer科技情報局原創，歡迎關注，帶你一起長知識！