另發表于Levi.Blog和oschina
??HTML5支持三種視頻文件格式（即編解碼器）。.ogg或.ogv、.mp4或.m4v和.webm。
??首先獲取視頻資源，然后輸入<video src="my-video.ext"></video>，這里的my-video.ext是視頻文件的位置，名稱和擴展名。
| 屬性 | 描述 |
|---|---|
| src（源） | 指定視頻文件的URL |
| autoplay（自動播放） | 當視頻可以播放時立即開始播放 |
| controls（控件） | 添加瀏覽器為視頻設置的默認控件 |
| muted（靜音） | 讓視頻靜音 |
| loop（循環） | 讓視頻循環播放 |
| poster（海報） | 指定視頻加載時要顯示的圖像（而不顯示視頻的第一幀）。接受所需圖像文件的URL |
| width（寬度） | 視頻的寬度（以像素為單位），通常默認為300 |
| height（高度） | 視頻的高度（以像素為單位），通常默認為150 |
| PReload（預加載） | 告訴瀏覽器要加載的視頻內容的多少?？梢允且韵氯齻€值： |
none表示不加載任何視頻 | |
metadata表示僅加載視頻的元數據（如長度、尺寸等） | |
auto表示讓瀏覽器決定怎樣做（這是默認的設置） |
??controls屬性會告訴瀏覽器添加一套用于控制視頻播放的控件。
??為視頻添加自動播放:
<video src="paddle-steamer.webm" autoplay controls></video>??如果瀏覽器不支持所使用的視頻文件格式，它會顯示視頻的控制條，或者顯示一個空的白色矩形區域（大多數情況下是這樣的），或者顯示海報圖像（前提是通過poster屬性指定了海報）。
??可以將視頻設為自動播放，還可以讓它持續播放，直到停止。要循環播放只需要使用autoplay和loop屬性。
??這里沒設置controls，訪問者就無法停止視頻。因此如果將視頻指定為循環，最好包含controls。如果不設置autoplay屬性，通常瀏覽器會在視頻加載時顯示視頻的第一幀。這個可以通過海報圖像進行指定，將其改為你設置的圖像。
??輸入<video src="my-video.ext" controls poster="my-poster.jpg"></video>，其中，my-video.ext指向你的視頻文件，my-poster.jpg是想要用做海報圖像的圖像。
??如果認為用戶看視頻的可能性較低（例如該視頻不是頁面的主要內容），可以讓瀏覽器不預先加載該視頻，節省寬度，節省流量等。 ??對于設置了preload="none"的視頻，在初始化視頻之前，各瀏覽器顯示視頻的方式并不一樣。
??上面這樣設置，會使頁面完全加載時也不會加載這個視頻，僅在用戶試著播放該視頻時才會加載它。
??preload的默認值是auto，這樣瀏覽器會預先加載大部分甚至整個視頻。在none和auto之間有一個不錯的選擇，就是preload="metadata"，這樣會讓瀏覽器僅獲取視頻的基本信息，如尺寸、時長甚至一些關鍵的幀。在視頻開始播放之前瀏覽器不會顯示白色的矩形，而是視頻的尺寸也會與實際尺寸一致。
??source元素用于定義一個以上的媒體元素（在這個例子中為video）的來源。一個video元素中可以包含任意數量的source元素。例如下面的程序，瀏覽器會加載第一個它支持的source元素引用的文件格式，并忽略其他的來源。
??上面提供的備用內容除了可以放置鏈接，還可以放置視頻的截圖或其他內容，例如，<p>Sorry, your browser doesn't support HTML5 video.<p>，然后再提供一個鏈接。
source的屬性
| 名稱 | 描述 |
|---|---|
| src | 視頻來源的URL |
| type | 用于指定視頻的類型，幫助瀏覽器決定它是否能夠播放該視頻。該屬性的值反映的是視頻的格式。 |
| media | 用于為視頻來源指定CSS3媒體查詢，從而可以為具有不同屏幕尺寸的設備指定不同的視頻。 |
??HTML5指定的一種新的文件格式WebVTT（Web Video Text Track，Web視頻文本軌道）用于包含文本字幕、標題、描述、篇章等視頻內容。其它相關信息，注意關注。
??HTML5支持的音頻文件格式包括.ogg、.mp3、.wav、.aac、.mp4、.opus。其中最好的兩種格式是.ogg和.mp3。
??首先獲取音頻文件，然后輸入<audio src="my-audio.ext" controls></audio>，其中的my-audio.ext是音頻文件的位置、名稱和擴展名。
音頻屬性
| 名稱 | 描述 |
|---|---|
| src（源） | 指定音頻文件的URL |
| autoplay（自動播放） | 當音頻可以播放時立即開始播放 |
| controls（控件） | 添加瀏覽器為音頻設置的默認控件 |
| muted（靜音） | 讓音頻靜音 |
| loop（循環） | 讓音頻循環播放 |
| preload（預加載） | 告訴瀏覽器要加載的音頻內容的多少?？梢允且韵碌娜齻€值。 |
none表示不加載任何音頻 | |
metadata表示僅加載音頻的元數據（如長度） | |
auto表示讓瀏覽器決定怎樣做（這是默認值） |
??和視頻類似。這里也是使用autoplay屬性，讓音頻在頁面加載時就自動播放。使用loop屬性可以讓音頻文件循環播放。對preload屬性使用上表中的值可以指定瀏覽器預加載音頻文件的方式。
<audio controls>開始audio元素（含默認控件集）。輸入<source src="my-audio.ogg" type="audio/ogg">，這里的my-audio.ogg是指向.ogg音頻文件。輸入<source src="my-audio.mp3" type="audio/mp3">，這里的my-audio.mp3是指向.mp3音頻文件。可選步驟（但推薦帶著對不支持HTML5的瀏覽器創建備用內容或音頻下載鏈接）。輸入</audio>結束audio元素。...<body> <h1>Audio with Sources and Text Link Fallback</h1> <audio controls> <source src="piano.ogg" type="audio/ogg"> <source src="piano.mp3" type="audio/mp3"> <p>Your browser doesn't support HTML5 audio, but you can <a href="piano.mp3">download the audio file</a> (MP3, 1.3 MB).</p> </audio></body></html>??除了可以提供下載鏈接作為備用方案，還可以嵌入一個能播放MP4視頻文件的Flash備用播放器。以MediaElement.js為例子進行演示。
獲取MediaElement.js文件，將其包括在網站目錄中并為網頁添加MediaElement.js
訪問MediaElement.js并下載ZIP包，解壓后，只將build文件夾復制到網站文件夾（可以復制到放置音視頻的文件夾中）。創建新的HTML頁面或打開一個現有的頁面，在head中加入下面這段代碼,從而讓頁面加載必要的樣式表和javaScript文件。將頁面保存到放置build文件夾的文件夾中。<script src="build/jquery.js"></script><script src="build/mediaelement-and-player.min.js"></script><link rel="stylesheet" href="build/mediaelementplayer.min.css" />為視頻添加備用Flash
獲取視頻資源。輸入<video controls>開始video元素（含默認控件集）。如果需要，可在此處指定width、height、poster等其他屬性。輸入<source src="my-video.mp4" type="video/mp4">，這里的my-video.mp4是MP4視頻源文件的名稱。輸入<source src="my-video.webm" type="video/webm">，這里的my-video.webm是WebM視頻源文件的名稱。如有需要，為不支持HTML5視頻和Flash的瀏覽器提供備用信息和鏈接。輸入</video>結束video元素。將下面第一段代碼添加到頁面中，從而初始化一個視頻播放器。為音頻添加備用Flash
獲取視頻資源。輸入<audio controls>開始audio元素（含默認控件集）。輸入<source src="my-audio.ogg" type="audio/ogg">，這里的my-audio.ogg指向.ogg音頻源文件。輸入<source src="my-audio.mp3" type="audio/mp3">，這里的my-audio.mp3指向.mp3音頻源文件。如有需要，為不支持HTML5音頻或者Flash的瀏覽器提供備用信息和鏈接。輸入</audio>結束audio元素。將下面第二段代碼添加到頁面中，從而初始化一個音頻播放器。將script放到</body>的前面，哪怕頁面擁有視頻以外的其他內容。<script>$('video').mediaelementplayer();</script><script>$('audio').mediaelementplayer();</script>也可以使用下面這段代碼，同時包括音視頻。
<script>$('audio,video').mediaelementplayer();</script>??注：如果沒為視頻指定preload="metadata"也沒有指定海報圖像，那么視頻的Flash版本會顯示一個黑色的矩形而不是視頻的一幀。不過當視頻開始播放時，黑色的矩形就會被視頻本身替代。 ??如果在video開始標簽中指定了width和height，那么視頻的Flash版本就有可能顯示黑邊。不過如果不指定尺寸，視頻會在一開始呈現一個比正常尺寸要大的區域，然后再縮小到正常大小。 ??一些Flash播放解決方案：Video.js、JW Player、Flowplayer等。JW Player和Flowplayer的免費版本會在媒體播放器上顯示它們的標識。
當Flash不起作用時 ??由于Flash的安全設置，當在自己的電腦上測試Flash播放器（即所有的文件都位于自己的電腦上）時，都有可能無法播放媒體文件。有一種解決辦法就是將MP3和MP4文件上傳到Web服務器，并在HTML中使用絕對路徑引用它們。
HTML and CSS 讀書筆記
本文為本人原創，采用 知識共享 “署名-非商業性使用-相同方式共享” 4.0 (CC BY-NC-SA 4.0)”許可協議 進行許可。 本作品可自由復制、傳播及基于本作品進行演繹創作。如有以上需要，請通過E-mail等方式告知，并在文章開頭明顯位置加上署名 [ 丁學文.Blog ] 、原文鏈接及許可協議信息，并明確指出修改（如有），不得用于商業用途。謝謝合作。 詳情請點擊查看許可協議及版權聲明具體內容。
博主聯系方式： E-mail： xuewending1995@Gmail.com [ 請注明來意 ] GitHub： Levi.GitHub
新聞熱點
疑難解答
