教你如何使用好HTML5的音頻和視頻

HTML5 透過HTML標籤「audio」和「video」來支援嵌入式的媒體，使開發者能夠輕鬆地將媒體嵌入HTML文件中。

嵌入媒體EDIT

在HTML中嵌入媒體：

<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls>  你的浏览器不支持 <code>video</code> 标签.</video>

這個例子展示了一個帶有回放控制器的可播放視頻，視頻源自Theora網站。

下面是一個將音訊嵌入到HTML文件的範例。

<audio src="/test/audio.ogg"><p>你的浏览器不支持audio标签</p></audio>

src屬性可以設定為音訊檔案的URL或本機檔案的路徑。

<audio src="audio.ogg" controls autoplay loop><p>你的浏览器不支持audio标签</p></audio>

這個範例的程式碼中使用了HTML的「audio」元素的一些屬性：

controls : 為網頁中的音訊顯示標準的HTML5控制器。

autoplay : 讓音訊自動播放。

loop : 讓音訊自動重複播放。

<audio src="audio.mp3" preload="auto" controls></audio>

preload屬性用來緩衝audio元素的大文件，有三個屬性值可供設定：

"none" 不緩衝檔案

"auto"緩衝音訊檔案

"metadata" 僅緩衝檔案的元資料

可以用  標籤指定多個文件，以提供不同瀏覽器可支援的編碼格式。例如：

<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檔案。 如果瀏覽器不支援Ogg，瀏覽器會播放MPEG-4 file。請參閱清單 audio和video元素支援的媒體格式 來查看不同瀏覽器對視訊音訊編碼格式的支援。

你也可以指定視訊檔案所需的視訊編解碼器的值；這樣允許瀏覽器做出更正確的決定：

<video controls>
  <source src="foo.ogg" type="video/ogg; codecs=
dir
ac, speex">
  Your browser does not support the <code>video</code> element.</video>

在這裡，我們指定video標籤使用Dirac和Speex的視訊編解碼器。如果瀏覽器支援Ogg，但不支援指定的編解碼器，則影片不會被載入。

如果類型屬性沒有被指定，媒體類型將返回到伺服器然後檢查瀏覽器是否可以解決；如果不能執行，就檢查下一個來源。如果沒有任何一個指定的來源元素可以使用，則分派一個錯誤事件標籤給video。如果指定了類型屬性，那麼將會與瀏覽器能夠播放的類型做對比，如果其沒有被識別，甚至不會被向伺服器發出詢問；相反，下一個來源會被同時檢查。

點選 媒體事件 來查看完整的媒體回放事件清單。要查看不同瀏覽器支援的媒體格式的詳細信息， 點擊 Media formats supported by the audio and video elements.

媒體回放控制EDIT

#當你已經用新的元素將媒體嵌入HTML 文件以後，你就可以用JavaScript 程式碼採用程式設計的方式來控制它們。比方說，如果你想（重新）開始播放，可以寫如下的程式碼：

var v = document.getElementsByTagName("video")[0];v.play();

頭一行是取得目前文件中第一個影片元素，下一行呼叫了該元素的 play() 方法，此方法在實作媒體元素的介面中定義。

控制一個HTML5 音訊播放器的播放、暫停、增減音量等則直接了當：

<audio id="demo" src="audio.mp3"></audio><p>
  <button 
onclick
="document.getElementById(&#39;demo&#39;).play()">播放声音</button>
  <button onclick="document.getElementById(&#39;demo&#39;).pause()">暂停声音</button>
  <button onclick="document.getElementById(&#39;demo&#39;).volume+=0.1">提高音量</button>
  <button onclick="document.getElementById(&#39;demo&#39;).volume-=0.1">降低音量</button></p>

終止媒體下載EDIT

#停止媒體播放很簡單，只要呼叫pause() 方法即可，然而瀏覽器還會繼續下載媒體直到媒體元素被垃圾回收機制回收。

以下是即時停止媒體下載的方法：

var mediaElement = document.getElementById("myMediaElementID");
mediaElement.pause();
mediaElement.src='';
//or
mediaElement.removeAttribute("src");

透過移除媒體元素的 src 屬性（或直接將其設為一個空字串——這取決於具體瀏覽器）， 你可以摧毀該元素的內部解碼，從而結束媒體下載。 removeAttribute() 操作並不乾淨， 而將

在媒體中尋找EDIT

媒體元素支援在媒體的內容中從目前播放位置移到某個特定點。 這是透過設定元素的屬性currentTime的值來達成的；有關元素屬性的詳細資訊請看HTMLMediaElement 。 簡單的設定那個你希望繼續播放的以秒為單位時間值。

你可以使用元素的属性seekable来决定媒体目前能查找的范围。它返回一个你可以查找的TimeRanges 时间对象。

var mediaElement = document.getElementById('mediaElementID');
mediaElement.seekable.start();
  // 返回开始时间
   (in seconds)mediaElement.seekable.end();
    // 返回结束时间 (in seconds)mediaElement.currentTime = 122;
     // 设定在 122 secondsmediaElement.played.end();
      // 返回浏览器播放的秒数

标记播放范围EDIT

在给一个

一条指定时间范围的语句：

#t=[starttime][,endtime]

时间值可以被指定为秒数（如浮点数）或者为以冒号分隔时/分/秒格式（像2小时5分钟1秒表示为2:05:01）。

【相关推荐】

1. html/css免费视频教程

2. 教你如何增强H5中video标签在浏览器中的兼容性

3. 详解HTML5展示视频的标准

4. 简述

5. 分析H5网页中video标签中的MP4视频无法播放的缘由

以上是教你如何使用好HTML5的音頻和視頻的詳細內容。更多資訊請關注PHP中文網其他相關文章！