HTML5的audio標簽和video標簽怎么使用

這篇文章主要介紹了HTML5的audio標簽和video標簽怎么使用的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇HTML5的audio標簽和video標簽怎么使用文章都會有所收獲，下面我們一起來看看吧。

audio和video標簽的推出，可以說是填補了HTML對音頻和視頻播放標簽的空白。一直以來，HTML都沒有適合自己的播放標簽，而統一采用<embed>這樣的標簽來播放。

audio 標簽

audio標簽支持HTML頁面中的音頻，我們可以自由地在HTML頁面中嵌入音樂和音頻流，下面從4個方面詳細介紹audio標簽。

1. 檢測瀏覽器是否支持audio標簽

無論如何，我們推薦讀者在使用新一代HTML5標簽的時候，應該檢測瀏覽器的能力，例如下面的代碼：

<audio>你的瀏覽器目前不支持HTML5的audio標簽。</ audio >

如果此瀏覽器顯示了文字“你的瀏覽器目前不支持HTML5的audio標簽”，則說明此瀏覽器對HTML5的audio標簽不支持，反之則支持。

這樣的檢測方法適用于很多新增閉合標簽，無須通過JavaScript腳本去判斷。

2. audio標簽的相關屬性

audio標簽的屬性與HTML4時代的embed標簽有很多類似的地方，應用起來也比較容易，

下面列出audio標簽的相關屬性：

屬性名稱           值的格式                  描 述

src                    xs:anyURI                指定音頻源文件的URL地址

autoplay           autoplay                   在頁面載入時自動播放

loop                  loop                          自動循環播放此標簽下指定的文件

controls            controls                    用戶可以對音頻進行控制

preload             preload                     這是預加載處理屬性，只要標簽被處理，就會自動加載相關數據。但是如果使用 "autoplay"，則忽略該屬性

3. audio標簽的瀏覽器兼容問題

由于目前音頻、視頻標準尚未在瀏覽器上獲得統一，各個廠商都有自己的立場和態度，而且可能會在較長時間內不會完全統一，因此，我們建議讀者采用兼容性寫法，這可以有效地覆蓋大多數支持音視頻標簽的瀏覽器。

<audio controls>

<!--如果瀏覽器支持ogg格式，則優先使用song.ogg-->

<source src="song.ogg">

<!--如果瀏覽器不支持ogg格式，則降級使用song.mp3-->

<source src="song.mp3">

</audio>

4. 使用audio標簽的常見問題

對于audio標簽，我們把大家常見的問題歸納如下。

audio標簽可以像Flash播放器一樣拖動播放嗎？

audio標簽是可以跳躍播放的。只要直接定位到目標位置，執行播放方法即可。

代碼大致如下：

var audio = document.getElementById('audio');//獲得audio標簽對象

audio.currentPosition; //得到要播放的位置

audio.play();

audio標簽有音量控制嗎？

audio標簽是可以直接調控播放時的音量的，使用方法為audio.volume。

audio標簽可以獲得音頻文件的信息嗎？

audio標簽是不可以讀取音頻內容信息的。

audio標簽可以進行預讀或預載嗎？

audio標簽是可以進行預載處理的，使用起來也很簡單，只需要在標簽中加入preload屬性即可：

<audio preload>您的瀏覽器不支持audio標簽</audio>

audio標簽可以制造出聲音嗎？

audio標簽是不可以直接操作并制造出新音頻內容信息的。

video 標簽

HTML5通過video標簽直接支持視頻的播放，使廣大瀏覽器終于脫離了Flash的枷鎖。在Linux和Mac OS中，對Flash的支持比較差。在非Windows操作系統的環境下，Flash對CPU的消耗是非常巨大的。這是眾多非Windows應用者的痛苦經歷，雖然最近這種情況有所改善。

另外，雖然移動設備有了廣泛應用與普及，但是卻沒有一個可以完整支持的Flash技術（除Symbian能支持簡單的Flash外）。全球最大的視頻網站YouTube率先推出了HTML5版，有很多網站為了迎合移動設備全都開發了沒有Flash的版本。

1. 檢測瀏覽器是否支持video

與audio標簽一樣，我們在使用新一代HTML5標簽的時候，都應該使用瀏覽器能力檢測標準方法去檢測瀏覽器的能力，比如下面的代碼：

<video>你的瀏覽器目前不支持HTML5的video標簽。</video>

如果此瀏覽器顯示了文字“你的瀏覽器目前不支持HTML5的video標簽”，則說明此瀏覽器不支持HTML5的video標簽，反之則支持。

2. video標簽的瀏覽器兼容性問題

對于人們通常關心的兼容性問題，其實可以用非常簡單的辦法來實現，本書在這里給出一段進行“優雅降級”的范例代碼，供讀者思考與借鑒：

<video>

<!--如果瀏覽器支持video，也支持H.264，用movie.mp4-->

<source src="movie.mp4">

<!--如果瀏覽器支持video，僅支持Ogg，用movie.ogv-->

<source src="movie.ogv">

<!--如果瀏覽器不支持video，嘗試Flash-->

<object data="videoplayer.swf" type="application/x-shockwave-flash">

<param name="movie" value="movie.swf"/>

</object>

<!--如果瀏覽器不支持video，也不支持Flash，給出下載鏈接-->

<a href="下載鏈接">你的瀏覽器啥都不支持，只能下載</a>

</video>

3. video的相關屬性介紹

屬性名稱                值的格式                           描 述

src                          xs:anyURI                       指定視頻源文件的URL地址

autobuffer              autobuffer                       允許自動緩沖

autoplay                 autoplay                          允許自動播放

loop                        loop                                允許自動循環播放

controls                 controls                           允許用戶對視頻進行控制

width                    cm|em|en|in|px|pt|%       視頻圖像的顯示寬度當高度未指明時，其值將與視頻寬度成一定比例

height                  cm|em|en|in|px|pt|%        視頻圖像的顯示高度。當寬度未指明時，其值將與視頻高度成一定比例

poster                 xs:anyURI                           當視頻未響應或緩沖不足時，該屬性值鏈接到一個圖像。該圖像將以一定比例被顯示出來

source                標簽格式                             這是與video配套的子標簽，專門用于描述src屬性和源文件的type屬性

4. video支持的視頻格式

目前，video支持的視頻格式還處于變動之中。在對大多數瀏覽器進行檢測后，我們總結了如下3種可以解決工程實際需要的格式。

? Ogg。帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件。

? MPEG4。帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG-4 文件。

? WebM。帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件。

5. 通用接口標準

video和audio標簽均使用基于抽象HTMLMediaElement的相同DOM接口。

下面介紹了標準的IDL規范接口，方便讀者學習控制各種視頻及音頻流。

事件：

loadstart加載開始

瀏覽器開始尋找媒體數據，作為資源選擇算法的一部分

使用前提條件：網絡狀態為加載狀態（NETWORK_LOADING）

progress進度

瀏覽器獲取媒體數據 

使用前提條件：網絡狀態為加載狀態（NETWORK_LOADING）

suspend掛起

瀏覽器有意不在當前獲取媒體數據，但是也不全部下載媒體資源

使用前提條件：網絡狀態為空閑狀態（NETWORK_IDLE）

abort終止

在媒體數據完全下載完之前，瀏覽器停止獲得媒體數據。這不能歸因于一個錯誤的發生

使用前提條件：錯誤是一個對象，表示媒體錯誤終止的MEDIA_ERR_ABORTED代碼。此時，網絡是處于空載狀態，還是處于空閑狀態，取決于什么時候下載終止

error錯誤

當取得數據時，錯誤發生 

使用前提條件： 錯誤是一個對象，表示媒體錯誤終止的MEDIA_ERR_NETWORK代碼或更高層次的代碼。此時，網絡是處于空載狀態，還是處于空閑狀態，取決于什么時候下載終止

emptied空閑

先前網絡狀態不是處于空載狀態的媒體要素剛剛轉向了這種狀態（或者是因為下載時被報告了一個致命的錯誤，或者是因為資源選擇算法已經運行時，load()方法被調用，這種情況下emptied事件是與load()方法的調用同時發生的）

使用前提條件： 網絡狀態為空載狀態，所有的IDL屬性都是初始化狀態

stalled遲延

瀏覽器正在獲取數據，但是數據有點出乎意料，沒有到來

使用前提條件：網絡狀態為裝載狀態（NETWORK_LOADING）

play播放

重新播放已經開始。當play()方法返回后，接著播放

使用前提條件：最近的暫停為假

pause暫停

重新播放已被停止。當pause()方法返回后，接著播放

使用前提條件：最近的暫停為真

loadedmetadata裝載媒體數據

瀏覽器決定媒體資源的持續時間和尺度 

使用前提條件： 準備狀態最近處于擁有當前的全部數據或第一次裝載大于所需數據的狀態

loadeddata裝載數據

瀏覽器能夠返回的數據位于第一次處于當前重播的位置

使用前提條件：準備狀態最近提升到擁有的數據或第一次大于所需的數據的狀態

waiting等待

因為不能得到下一個幀，所以重新播放被停止，但是瀏覽器希望在這個過程中能得到這個架構

使用前提條件：準備狀態最近等于或少于當前的數據，暫停則為假。其狀態為要么搜索為真，要么當前回放位置不包含在緩沖的數據中

playing正在播放

回放被啟動 

準備狀態最近等于或多于未來的數據，暫停則為假，搜索也為假；或者當前回放位置包含在緩沖的數據中

canplay能夠播放

瀏覽器能夠繼續回放媒體數據，但如果回放操作現在就開始的話，不用停下來等待進一步的緩沖，媒體資源則不能以當前的回放速率一直工作到結束

使用前提條件：準備狀態最近增加到未來的數據或更多

canplaythrough能夠從頭到尾播放

如果瀏覽器現在就開始回放操作的話，媒體資源能以當前的回放速率一直工作，而不用停下來等待進一步的緩沖

使用前提條件： 準備狀態最近等于足夠的數據

seeking正在尋找

尋找IDL的屬性被修改為真，搜索操作用去的時間很長

seeked尋找

尋找IDL的屬性被修改為假

timeupdate時間更新

作為正常回放的一部分，當前回放位置被改變；或是以一種有趣的方式進行回放，如間斷進行

ended結束

因為到達了媒體資源的終點，所以回放被停止

使用前提條件： 當前的時間等同于媒體資源結束的時間；結束為真

ratechange交換率

defaultPlaybackRate或是playbackRate屬性已被更新

durationchange持續期的交換

duration屬性已被更新

volumechange卷交換

volume屬性或是muted屬性被修改。在相關屬性的安裝已經返回后，開始工作

6. video存在的問題

Web的多媒體應用前景非常廣闊，但是HTML5也有自身的問題：到目前為止，網頁上的視頻格式標準一直沒有統一，蘋果公司和微軟支持H.264標準（MPEG4），谷歌公司、Mozilla和Opera支持Ogg Theora（Ogg）和WebM。

視頻格式標準之爭，已經不是一兩天的事情了，而且這些爭論及其帶來的后果已經大大影響了各大平臺和開發者對video標簽的使用。而采用video標簽的平臺，必然面臨著使用H.264還是使用Ogg的問題，如果兩者都使用，又必須對同一個資源文件采用兩種格式，由此帶來了大量重復的格式轉換工作，這恐怕是很多人頭疼的問題。

7. Audio Data API 

瀏覽器廠商對Audio API的擴展是抱有巨大希望的，Mozilla對Audio的研究更加超前，在他們看來，瀏覽器不僅可以播放聲音，還應該可以制造聲音。

Audio Data API是 HTML5 規范中的媒體元素 <audio> 與 <video> 的補充功能，它讓開發者可以存儲和讀取音效的外部數據（也有人將之稱為后設數據）以及音頻本身的原生數據。開發者可以具象化這些音效數據，分析這些數據，甚至創造出新的音效數據。這是對瀏覽器進行音頻領域的一個巨大探索和拓展。

Moz下的事件

? loadedMetadata事件。當一個媒體的數據傳至用戶計算機的時候，此事件會被觸發。它有3個屬性，具體如下所示。

  mozChannels。聲道的數量。

  mozSampleRate。取樣頻率（次/秒）。

  mozFrameBufferLength。每次事件所有聲道的總樣本數。

這些屬性下的數據，在解碼音頻數據流時會用到。

? mozAudioAvailable事件。當播放一個音頻源時，音頻數據會被傳送至音頻處理層級而這些內容也會被輸入進音頻緩沖區（大小取決于mozFrameBufferLength）。當緩沖區被填滿的時候，一個mozAudioAvailable事件會被觸發。音頻的播放、暫停和跳躍都會影響音頻數據串流。該事件有兩個屬性，具體如下所示。

    frameBuffer。含有解碼后的音頻數據（浮點數）的frame緩沖區（一個數組）。（注意：內容不會照對應的聲道分隔，而是混在一起，比如一個雙聲道信號：聲道1-內容1，聲道2-內容1，聲道1-內容2，聲道2-內容2，聲道3-內容1，聲道3-內容2。）

    time。時間戳，從開始時間計（計量單位：秒）。

下面代碼是對上述兩個事件進行說明用的源碼：

<audio id="myaudio" src="song.ogg" controls="true"></audio>

<pre id="raw">hello</pre>

<script type="text/javascript">

function loadedMetadata(){

channels = audio.mozChannels; //聲道的數量

rate = audio.mozSampleRate; //取樣頻率（次/秒）

frameBufferLength = audio.mozFrameBufferLength; //總樣本數

}

function audioAvailable(event){

var frameBuffer = event.frameBuffer;

var t = event.time;

var text = "當前位置：" + t + "\n";

text += frameBuffer[0] + " " + frameBuffer[1];

raw.innerHTML = text;

}

var raw = document.getElementById('raw');

var audio = document.getElementById('myaudio');

audio.addEventListener('mozAudioAvailable',audioAvailable, false); //對事件進行監聽

audio.addEventListener('loadedMetadata',loadedMetadata, false); //對事件進行監聽

</script>

制造音頻流

根據本API，我們可以用JavaScript腳本設定音頻流的格式，然后寫入音頻數據。開發人員只需要建立一個音頻對象，然后使用mozSetup()方法來設定聲道的數量跟頻率（Hz）即可。

下面請看源碼：

var testA = new Audio(); //實例化一個audio對象

testA.mozSetup(2,44100); //設定此對象的格式為「雙聲道，44.1kHz」

var ADU = [0.242, 0.127, 0.0,-0.058,-0.242,...]; //用JavaScript數組來存放聲音的數據（當然，

//你也可以使用你熟悉的其他方法來存放聲音

//數據）

var audio_Stream = testA.mozWriteAudio(ADU); //用mozWriteAudio()方法來寫入音頻流

注意 并不是所有的樣本都會被寫入串流。函數會回傳被寫入串流的樣本數，這對于下一次要寫入數據很好用。

修改音頻流

由于mozAudioAvailable 事件與mozWriteAudio()方法都是使用Float32Array傳值，因此，把一個音頻流的輸出直接接上（或是處理過后接上）另一個音頻流是可以做到的。辦法很簡單，只需要修改數組中的內容即可。同時，你也可以做到隨時屏蔽、合成、分軌音量和并軌音頻等。

8. Web Audio API

此API由Google公司提供，目前的最佳試驗環境為Chrome 11及其以上版本的瀏覽器。

Web Audio API有很多接口：源、參數、緩沖區、進程事件、監聽器、放大器、延遲效果、空間效果、折積效果、實時分析、動態比較器、過濾器和聲道分離器等。這里根據W3C工作組的翻譯文件，略作一些介紹。

? 放大器（AudioGainNode）。主要是放大音頻效果，它有兩個參數，numberOfInputs和numberOfOutputs，只有一個Gain（增益）屬性。

? 延遲效果（AudioDelayNode）。主要是放大音頻效果，它有兩個參數，numberOfInputs和numberOfOutputs，只有一個delayTime（延遲時間）屬性。

? 空間效果（AudioPannerNode）。主要是對維度空間的音頻消散計算，包括聲音方向、多普勒效應的計算等。

? 折積效果（AudioConvolverNode）。主要用于模擬環境的音效。

? 實時分析（AudioRealtimeAnalyserNode）。主要是用于快速傅立葉轉換，以用于可視化視頻。它有5個屬性，分別是fftSize、frequencyBinCount、minDecibels、max-Decibels、smoothingTimeConstant。

關于“HTML5的audio標簽和video標簽怎么使用”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“HTML5的audio標簽和video標簽怎么使用”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。