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