HTML5視頻<video>/音頻<audio>的用法介紹
HTML5裡引入的新標記<audio>和<video>實現了HTML對視頻播放和音頻播放的原生支持，有了這種原生的HTML5視頻播放器/音頻播放器，能將視頻/音頻嵌入到了網頁中。如何嵌入視頻和音頻在網頁裡嵌入HTML5音頻播放器和視頻播放器的方法非常簡單：<video src="http://www.netyea.com/~j/theora_testsuite/320x240.ogg" controls autoplay loop>Your browser does not support the <code>video</code> element.
</video>
上面這個例子顯示瞭如何播放一個視頻文件，並露出視頻播放控制按鈕。下面這個例子是在HTML網頁裡嵌入音頻audio的方法：<audio controls autoplay loop src="/test/audio.ogg">
<p>Your browser does not support the <code>audio</code> element.</p>
</audio>
這裡的src屬性裡可以填入一個音頻/視頻的URL，也可以是一個本地的文件。<audio src="audio.ogg" controls autoplay loop>
<p>Your browser does not support the <code>audio</code> element </p>
</audio>
下面是<audio>和<video>兩個標記上控制屬性的含義：
[*]controls : 顯示標準的HTML5 視頻/音頻播放器控制條、控制按鈕。
[*]autoplay : 讓文件自動播放。
[*]loop : 讓文件循環播放。
<audio src="audio.mp3" preload="auto" controls></audio>
這裡的preload屬性是用來緩存大體積文件的。它有三個可選值：
[*]"none" 不緩存
[*]"auto" 緩存
[*]"metadata" 只緩存文件元信息
為了能夠兼容各種瀏覽器對不同媒體類型的支持，我們可以用多個<source>元素來提供多個不同的媒體類型。例如：<video controls>
<source src="foo.ogg" type="video/ogg">
<source src="foo.mp4" type="video/mp4">
Your browser does not support the <code>video</code> element.
</video>
支持Ogg格式視頻流的瀏覽器可以播放Ogg文件。如果不支持，可以播放MPEG-4文件。查看各種瀏覽器對各種媒體類型的支持情況，請查看這裡。我們還可以指定播放使用的解碼器(codecs); 這樣就可以更精確的讓瀏覽器如何播放提供的視頻：<video controls>
<source src="foo.ogg" type="video/ogg; codecs=dirac, speex">
Your browser does not support the <code>video</code> element.
</video>
上面，我們指定了這個視頻需要使用Dirac 和Speex 解碼器。如果瀏覽器支持Ogg 格式，但沒有指定的解碼器，那麼，視頻將不會被加載。如果沒有提供type屬性，則瀏覽器會向服務器詢問媒體類型，看看是否支持；如果不支持，瀏覽器將會去檢查下一個source屬性。
用JavaScript控制視頻/音頻播放一旦視頻文件正確的嵌入到了HTML網頁裡，我們就可以使用JavaScript裡控制它的部分，獲取它的播放信息。比如，用JavaScript啟動視頻播放：var v = document.getElementsByTagName("video");
v.play();
用JavaScript可控制HTML5視頻播放器實現播放、暫停、快進，快退、音量等。<audio id="demo" src="audio.mp3"></audio>
<div>
<button onclick="document.getElementById('demo').play()">播放</button>
<button onclick="document.getElementById('demo').pause()">暂停</button>
<button onclick="document.getElementById('demo').volume+=0.1">降低音量</button>
<button onclick="document.getElementById('demo').volume-=0.1">提高音量</button>
</div>
停止下載視頻文件雖然我們可以使用pause()方法裡讓視頻文件停止播放，但瀏覽器並未停止下載媒體文件，除非它達到了一定的緩存量。下面是讓瀏覽器如何停止下載視頻文件的方法：var mediaElement = document.getElementById("myMediaElementID");
mediaElement.pause();
mediaElement.src='';
//或
mediaElement.removeAttribute("src");
通過刪除src屬性(或者設置為空值)，這樣就能停止文件的網絡下載。
設定播放的時間點定位我們可以指定視頻從某時某分某秒開始播放，這是通過設置currentTime屬性來實現。我們可以通過seekable屬性來獲得視頻有效的播放時間範圍。它會返回一個TimeRanges對象，能夠告訴你有效的開始時間和結束時間。var mediaElement = document.getElementById('mediaElementID');
mediaElement.seekable.start(0); //返回開始時間(秒)
mediaElement.seekable.end(0); //返回結束時間(秒)
mediaElement.currentTime = 122; //定位到第122秒播放
mediaElement.played.end(0);//返回已經播放的時間長度(秒)
設定播放範圍當在網頁裡嵌入視頻/音頻文件時，<audio>或<video>元素允許我們提供一些額外的信息來指定播放哪一時間段。實現的方法是在媒體文件後面跟隨(“#”)格式的信息。它的具體語法是這樣的：#t=[開始時間][,結束時間]
時間的表示方法可以使用秒數，也可以提供一個”時:分:秒“ 格式的時間(例如2:05:01)。
舉例：
http://www.netyea.com/video.ogg#t=10,20指定視頻從10秒開始播放，到20秒處結束。http://www.netyea.com/video.ogg#t=,10.5指定視頻從頭開始播放到10.5 秒處。http://www.netyea.com/video.ogg#t=,02:00:00指定視頻播放2小時。http://www.netyea.com/video.ogg#t=60指定視頻從第60秒開始播放，播放到結束。
如要加圖片預覽<video id="movie" preload controls loop poster="poster.png" width="640" height="360">
<source src="aaa.mp4" type="video/mp4" />
<source src="aaa.ogv" type="video/ogg" />
<source src="aaa.webm" type="video/web" />
您的瀏覽器不支援HTML 5影片播放標籤<video>格式。
Your browser doesn't support the <video> tag.
</video>標籤解釋
[*]首先整個HTML我們是使用<video></video>兩的標籤來包著，前面代表開始，後面代表結束。
[*]<video>標籤裡面有幾個屬性，你可以使用，用法如下：
[*]autoplay(自動播放)：你可以輸入"autoplay"(開啟自動播放)、"" (空白字串，開啟自動播放)、或不輸入(開啟自動播放)。
[*]preload(預先載入)：你可以輸入"none"(關閉預先載入)、"metadata"(開啟預先載入)、"auto"(自動)、"" (空白字串，開啟預先載入)、或不輸入(開啟預先載入)。
[*]controls(控制按鈕)：你可以輸入"controls"(開啟控制按鈕)、"" (空白字串，開啟)、或不輸入(開啟)。
[*]瀏覽器預設是沒有其他控制項目的，如果你開啟，你可以提供一些播放控制元件，播放、暂停、定位、音量、全螢幕、字幕（如果可用）、聲道（如果可用），這些可以透過額外的Javascript來完成。
[*]loop(播放循環)：你可以輸入"loop"(開啟循環)、"" (空白字串，開啟)、或不輸入(開啟)。
[*]poster(預覽圖片)：用來選擇影片播放前，所顯示的圖片，不能空白，若要使用此屬性則請輸入圖片網址。
[*]height(影片高度)：請輸入非負的整數，不需輸入單位(px，pixel)。
[*]width(影片寬度)：請輸入非負的整數，不需輸入單位(px，pixel)。
[*]muted(靜音)：你可以輸入"muted" (開啟靜音)、"" (空白字串，開啟)、或不輸入(開啟)。
[*]src(影片位置)：放置影片原始檔的網址，或相對位址。
所以上面提供的範例意思是「這個影片我要有控制按鈕，要預先載入影片，然後影片結束之後要循環播放，在開始播放之前，顯示預覽圖片，寬是640px，高是360px」。[*]再來是中間的<source … />標籤，意思是影片的原始檔位置與類型。
[*]檔案位置請用「src="檔案位置"」，這個屬性，如果影片和網站在相同的資料夾，則在「檔案位置」中直接輸入影片檔名(主檔名+副檔名)，如果不是，你可以直接輸入網址如<source src="https://…/~.mp4″ />，例如： <source src="https://example/html5-video-tag/Yif-Magic.mp4″ />
[*]類型的選擇請用「type="video/檔案類型"」，例如，如果附檔名是「.mp4」，則類型的選擇請寫「type="video/mp4″」；如果是「.webm」，則寫「type="video/web"」；注意，如果是「.ogv」，則類型的選擇請寫「type="video/ogg“」，不要問我為什麼，因為我也不知道這個地方就會不一樣。如果想知道個多可以上網Google。
[*]再來是針對那些無法播放影片的瀏覽者，告訴他們原因，所以我們在</video>的前面告訴他們：「您的瀏覽器不支援HTML 5影片播放標籤<video>格式。」
文章來源
頁:
[1]