html5中的video標籤和audio標籤

時間 2019-12-13

標籤 html5 html video 標籤 audio 欄目 HTML5 简体版

原文原文鏈接

無論是否認可，flash早已不像過往那樣如日中天了。亞馬遜全面放棄flash、蘋果放棄flash、安卓也放棄了移動端的flash支持。事實上flash已經不太適合web開發了，由於HTML5中的video和audio這兩個API爲web開發提供了更高效的音頻視頻控制。或許你能夠看看這篇文章。javascript

video標籤

爲什麼須要多個格式的視頻文件

在HTML5頁面中，咱們可使用video標籤來實現對視頻文件的控制。可是在瀏覽器中打開視頻並沒那麼簡單，不只瀏覽器要支持標籤，並且還要有編碼譯碼器來播放視頻。顯然最好的解決方式是HTML5規範規定一個統一的編碼譯碼器，而後讓瀏覽器製造商去執行。
可是，那些這些製造商的尿性你們都是知道的，HTML5規範到最後也沒有制定一個統一的視頻編碼譯碼器標準。
最後的狀況是，若是要考慮視頻在不一樣瀏覽器下的兼容性，開發者就要考慮好些狀況了:html

Opera、Mozilla、Chrome瀏覽器支持的Ogg Theora或者VP8編碼譯碼器所能處理的
Safari、IE高版本（9++）、Chrome支持的H.264
IE低版本（8--）

而.MP4後綴的視頻文件是帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件； WebM是帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件；Ogg是帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件。
因此通常只須要Ogg、MP4和flv/swf格式的視頻文件，也就是須要三個視頻文件，就能完美地在各個瀏覽器間顯示視頻了。html5

固然，各瀏覽器支持一直在變更，全部脫離時間來談支持的都是在耍流氓。能夠在caniuse上查看下各瀏覽器對video的支持。
java

video標籤的兼容代碼

因此通常的<video>標籤的內容，由簡到繁的三種寫法：

最簡單的形式是:

<video width="400px" height="400px" src="video/ video.mp4" type="video/mp4"  controls>
視頻不支持時顯示的文字 
</video>

兼容Firefox的寫法

<video width="400px" height="400px" controls>
<source src="video/ video.ogg" type="video/ogg" /> 
<source src="video/ video.mp4" type="video/mp4" />
 還用渣渣瀏覽器？？？
</video>

兼容IE8的寫法

<video width="400px" height="400px" controls>
<source src="video/ video.ogg" type="video/ogg" /> 
<source src="video/ video.mp4" type="video/mp4" />
<embed src="video/ movie.swf" type="application/x-shockwave-flash" 
width="400" height="400px" allowscriptaccess="always" allowfullscreen="true"></embed> 
 抱歉，本站不歡迎你...
</video>

HTML5中媒體的類型（video和audio）

規定要檢測的音頻/視頻類型（和可選的編解碼器）。
經常使用值：web

video/ogg
video/my4
video/webm
audio/mpeg
audio/ogg
audio/mp4

經常使用值，包括編解碼器：api

video/ogg; codecs="theora, vorbis"
video/mp4; codecs="avc1.4D401E, mp4a.40.2"
video/webm; codecs="vp8.0, vorbis"
audio/ogg; codecs="vorbis"
audio/mp4; codecs="mp4a.40.5"

video標籤中的屬性

Video標籤含有src、poster、preload、autoplay、loop、controls、width、height等幾個屬性，以及一個內部使用的標籤<source>。瀏覽器

src屬性和poster屬性
你能想象src屬性是用來幹啥的。跟<img>標籤的同樣，這個屬性用於指定視頻的地址。而poster屬性用於指定一張圖片，在當前視頻數據無效時顯示（預覽圖）。視頻數據無效多是視頻正在加載，多是視頻地址錯誤等等。緩存
```
<video width="658" height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay"></video>
```
preload屬性
此屬性用於定義視頻是否預加載。若是有這個屬性有三個可選擇的值：none（頁面加載後不載入視頻）、meta（頁面加載後只載入元數據）、auto（頁面加載後載入整個視頻）。若是不使用此屬性，默認爲auto。若是<video>標籤有autoplay屬性的話，會忽略preload屬性。服務器
```
<video width="658" height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none"></video>
```

autoplay屬性
autoplay屬性用於設置視頻是否自動播放，是一個布爾屬性。當出現時，表示自動播放，去掉是表示不自動播放。網絡

<video width="658" height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none"></video>

loop屬性
指定視頻是否循環播放，也是一個布爾屬性

<video width="658" height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay" loop="loop"></video>

controls
布爾屬性，用於向瀏覽器指明頁面製做者沒有使用腳本生成播放控制器，須要瀏覽器啓用自己的播放控制欄。
控制欄須包括播放暫停控制，播放進度控制，音量控制等等。
不一樣瀏覽器顯示的控制器樣式不同，而這些其實都是能夠經過使用HTML5中的video API來本身設定的，好比這個video.js自定義視頻播放器。
width和height
這個很清楚，很少說。
<source>標籤
用於給video標籤指定多個可選擇的視頻文件地址，標籤最後會選擇一個，並且要在<video>標籤沒有src屬性時使用。
瀏覽器按source標籤的順序檢測指定的視頻是否能播放，沒法播放的緣由多是格式不支持，或者文件不存在等。若是不能播放，則嘗試播放下一下。<source>標籤不能單獨出現，必需要放在媒體標籤裏面。
- src屬性指定媒體的地址，和video標籤裏的同樣
- Type屬性說明src屬性指定媒體的類型，幫助瀏覽器在獲取媒體前判斷是否支持此類別的媒體格式。具體的屬性值，請參見w3c的文檔。
- Media屬性用於說明媒體在何種媒介中使用，不設置時默認值爲all，表示支持全部媒介。其實就是和<style>標籤的media屬性如出一轍。
注意：XHTML中屬性不容許簡寫，好比controls必須寫做<video src='src/myvideo' controls='controls'>

HTML中的媒體API

HTML5中的媒體API給咱們更強大的媒體控制能力。能夠在輕鬆學會HTML5播放器開發這個學習頁面簡單瞭解下媒體API中經常使用的幾個屬性和方法。

HTMLVideoElement和HTMLAudioElement 均繼承自HTMLMediaElement

關於媒體狀態信息的媒體屬性

只讀屬性

error屬性
只讀。用於返回一個MediaError對象。MediaError對象的code屬性包含了視頻的錯誤狀態，它是一個數字值（想一想HTTP狀態碼），具體以下：
- 1 = MEDIA_ERR_ABORTED - 取回過程被用戶停止
- 2 = MEDIA_ERR_NETWORK - 當下載時發生錯誤
- 3 = MEDIA_ERR_DECODE - 當解碼時發生錯誤
- 4 = MEDIA_ERR_SRC_NOT_SUPPORTED - 不支持音頻/視頻
  使用方法：
```
var myVid=document.getElementById("video1");
alert(myVid.error.code);
```
currentSrc屬性
只讀。myVid.currentSrc會返回該媒體播放的文件的URL，和src屬性不一樣。就算<video>標籤有src屬性且爲相對路徑，myVid.getAttribute('src')會返回src的值，而currentSrc倒是會返回絕對路徑。
若是未設置媒體文件，會返回空字符串。
networkState屬性
只讀。myVid.networkState 屬性返回媒體的當前網絡狀態（activity）。具體以下：
- 0 = NETWORK_EMPTY - 音頻/視頻還沒有初始化
- 1 = NETWORK_IDLE - 音頻/視頻是活動的且已選取資源，但並未使用網絡
- 2 = NETWORK_LOADING - 瀏覽器正在下載數據
- 3 = NETWORK_NO_SOURCE - 未找到音頻/視頻來源
readyState屬性
只讀。myVid.readyState返回媒體當前播放的就緒狀態。
- 0 = HAVE_NOTHING - 沒有關於音頻/視頻是否就緒的信息，或者說當前播放位置無有效媒介資源
- 1 = HAVE_METADATA - 已經得到了音頻/視頻就緒的元數據,媒介資源確認存在，但當前位置沒有可以加載到有效媒介數據進行播放,等待後續加載
- 2 = HAVE_CURRENT_DATA - 雖然當前播放位置的數據是可用的，但沒有足夠的數據來播放
- 3 = HAVE_FUTURE_DATA - 已經得到了後續播放的數據，能夠進行播放，但不足以播放到最後
- 4 = HAVE_ENOUGH_DATA - 能夠進行播放，且且瀏覽器確認媒體數據以某一種速度進行加載，能夠保證有足夠的後續數據進行播放，而不會使瀏覽器的播放進度遇上加載數據的末端
seeking屬性
只讀。myVid返回一個布爾值，代表瀏覽器是否在媒體中尋址。true表示瀏覽器正在尋址，false表示瀏覽器已中止尋址。
尋址（Seeking）指用戶在視頻中跳躍到新的位置。使用以下代碼：
javascript //當在視頻進度條點擊當前播放位置的後面時，span1的位置會顯示'Seeking:true'，而後過一會變成'Seeking:false' myVid=document.getElementById("video1"); function isSeeking() { document.getElementById("span1").innerHTML=("Seeking: " + myVid.seeking); } myVid.addEventListener('seeking',isSeeking;)
seekable屬性
只讀。myDiv.seekable會返回一個TimeRanges對象，這個對象表示媒體文件中用戶可尋址的範圍。可尋址範圍指的是用戶在媒體中可尋址（移動播放位置）的時間範圍。
對於非流視頻，一般能夠尋址到視頻中的任何位置，即便其還沒有完成緩衝。
TimeRanges對象(MDN):表示音頻/視頻的緩衝範圍。緩衝範圍是指已經緩衝的音頻/視頻的時間範圍。若是用戶在音頻/視頻中跳躍播放，將會獲得多個緩衝範圍。它的屬性有：
- length - 得到音頻/視頻中可尋址範圍的數量
- start(index) - 得到可尋址範圍的開始位置
- end(index) - 得到可尋址範圍的結束位置
  注意，第一個緩衝範圍的下標index是0。
played、paused、ended屬性
均爲只讀。played返回一個TimeRanges對象，代表瀏覽器已播放的媒體的時間範圍。
myVid.paused則返回一個布爾值，代表媒介是否暫停播放。由於只讀，因此不能經過設置myVid.paused=false來繼續播放。
myVid.ended返回一個布爾值，代表媒體是否已經結束。
duration屬性
只讀。返回當前媒體文件的長度，以秒來計。
buffered屬性
只讀。返回TimeRanges對象，確認瀏覽器已經緩存的文件。
能夠看看這個效果，就是靠JS操縱這些API來實現的

可讀寫屬性

defalutPlaybackRate
設置或返回媒體的默認播放速度。
注意：設置該屬性僅會改變默認的播放速度，而不是當前的。要改變當前的播放速度，要用playbackRate屬性。
playbackRate
設置或返回媒體的當前播放速度。
currentTime屬性
可讀寫屬性。用於設置或者讀取媒體播放的當前位置（以秒計）。若是是設置該屬性，則播放會跳躍到指定位置。
preload屬性
返回媒體標籤的preload屬性值，或者對其賦值。
autoplay屬性
可讀寫屬性。布爾值，表示媒體是否設置了自動播放。
loop屬性
可讀寫屬性。布爾值，表示媒體是否設置了循環播放。
controls屬性
可讀寫屬性。布爾值，表示媒體是否使用了瀏覽器默認的播放控制欄。
src屬性
設置或返回媒體文件的當前來源。
volume屬性
設置或者返回當前媒體的音量值。範圍爲0~1，0至關於靜音，1是最大音量。
muted屬性
布爾值。表示當前媒體是否開啓了靜音。

媒體API中的方法

play() 播放視頻，並把myVid.paused強行設爲false。
pause()暫停視頻，並把myVid.paused強行設爲true。
load() 從新載入視頻，而後把myVid.playbackRate的值強行設爲meVid.defaultPlaybackRate的值，且強行把media.error的值設爲null。
canPlayType(type)
測試瀏覽器是否支持特定的媒體類型。返回值有3個可能結果：空字符串（瀏覽器不支持此種媒體類型）、maybe（瀏覽器可能支持此種媒體類型）、probably（瀏覽器肯定支持此種媒體類型）。
可能type在前面的媒體類型一節已說明。若是是帶編碼譯碼器的，只會返回probably。

媒體API中的事件

完整的事件列表 w3c

loadstart事件：瀏覽器開始尋找指定的媒體時，即當加載過程開始時。
durationchange事件：媒介時長（duration屬性）改變。
好比：當音頻/視頻加載後，時長將由 "NaN" 變爲音頻/視頻的實際時長。
loadedmetadata事件：瀏覽器獲取完媒介資源的時長和尺寸。
loadeddata事件：已加載當前播放位置的媒介數據。
progress事件：瀏覽器正在獲取媒介。
canplay事件：瀏覽器可以開始媒介播放，但估計以當前速率播放不能直接將媒介播放完（播放期間須要緩衝）。
canplaythrough事件：瀏覽器估計以當前速率直接播放能夠直接播放完整個媒介資源（期間不須要緩衝）。
abort事件：瀏覽器在徹底加載前停止獲取媒介數據。這是在媒體數據終止下載時觸發，而不是出錯時觸發。
suspend事件：該事件在媒體數據被阻止加載時觸發。能夠是完成加載後觸發，或者由於被暫停的緣由。
error事件：獲取媒介數據，也就是媒體加載時出錯。
emptied事件：媒介元素的網絡狀態忽然變爲未初始化。
stalled事件：瀏覽器嘗試獲取媒體數據，但數據不可用時觸發。
play事件：即將開始播放。
pause事件：暫停播放。
waiting事件：在視頻因爲須要緩衝下一幀而中止時觸發。
playing事件：在媒體文件由於緩衝而中止或暫停以後已就緒時觸發。
好比：拉動行動條時。
seeking事件：瀏覽器正在請求數據（seeking屬性值爲true）。
seeked事件：瀏覽器中止請求數據（seeking屬性值爲false）。
timeupdate事件：當前播放位置（currentTime屬性）改變。好比用來實現顯示播放了的時間。
ended事件：播放因爲媒介結束而中止。
ratechange事件：播放速率（playbackRate屬性）改變時觸發。
volumechange事件：音量（volume屬性）改變或靜音（muted屬性）。

事實上，當媒體加載時，會依次發下以下事件：

loadstart
durationchange
loadedmetadata
loadeddata
progress
canplay
canplaythrough

更完整的媒體API能夠查看video和audio參考手冊

音頻的相關內容

<audio>用於定義音頻文件，好比音樂或者其餘的音頻流。
目前<audio>支持3種文件格式:MP三、Wav、Ogg。也能夠在caniuse上查看目前的支持狀況。
以前說過，HTMLVideoElement和HTMLAudioElement 均繼承自HTMLMediaElement，因此<audio>和<video>的API基本是通用的，並且兩個標籤能使用的屬性也相同。

在HTML中播放音頻

不使用<audio>標籤，使用插件：
瀏覽器插件是一種擴展瀏覽器標準功能的小型計算機程序。
插件可使用 <object>標籤或者 <embed>標籤添加在頁面上.
這些標籤訂義資源（一般非 HTML 資源）的容器，根據類型，它們即會由瀏覽器顯示，也會由外部插件顯示。
使用插件的示例代碼：

<embed height="50" width="100" src="horse.mp3">
    <object height="50" width="100" data="horse.mp3"></object>

`<embed> `標籤訂義外部（非 HTML）內容的容器。（這是一個 HTML5 標籤，在 HTML4 中是非法的，可是全部瀏覽器中都有效）。

最好的HTML5辦法是使用audio標籤，而後若是失敗代碼回退至<embed>。缺點是要把音頻轉換爲不一樣的格式，且<embed>沒法回退來顯示錯誤消息。
使用<a>標籤。
若是網頁包含指向媒體文件的超連接，大多數瀏覽器會使用"輔助應用程序"來播放文件。
如下代碼片斷顯示指向 mp3 文件的連接。若是用戶點擊該連接，瀏覽器會啓動"輔助應用程序"來播放該文件：

<a href="horse.mp3">Play the sound</a>

可是考慮到這種方式會顯示成一個超連接，而後就須要對`<a>`元素進行處理了，所以不太推薦。

終級方法，使用庫。
雅虎媒體播放器是一個免費的在線媒體播放器，只須要添加一行代碼到頁面底部就能夠輕鬆地把HTML5頁面製做成專業的播放列表：

<a href="horse.mp3">Play Sound</a>
    <script src="http://mediaplayer.yahoo.com/latest"></script>

而後只需簡單地把 MP3 文件連接到您的 HTML 中，JavaScript 會自動地爲每首歌建立播放按鈕。雅虎媒體播放器爲您的用戶提供的是一個小型的播放按鈕，而不是完整的播放器。不過，當您點擊該按鈕，會彈出完整的播放器。

關於內聯聲音的說明

當您在網頁中包含聲音，或者做爲網頁的組成部分時，它被稱爲內聯聲音。

若是您打算在 web 應用程序中使用內聯聲音，您須要意識到不少人都以爲內聯聲音使人惱火。同時請注意，用戶可能已經關閉了瀏覽器中的內聯聲音選項。
咱們最好的建議是隻在用戶但願聽到內聯聲音的地方包含它們。一個正面的例子是，在用戶須要聽到錄音並點擊某個連接時，會打開頁面而後播放錄音。

具體代碼

最少的代碼

<audio src="song.ogg" controls="controls"></audio>

帶有不兼容提醒的代碼

<audio src="song.ogg" controls="controls">
Your browser does not support the audio tag.
</audio>

能平穩退化的代碼

<audio controls="controls">
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>

track標籤

<track> 標籤爲媒體元素（好比 <audio> and <video>）規定外部文本軌道。它也是HTML5中的新標籤。
用於規定字幕文件或其餘包含文本的文件，當媒體播放時，這些文件是可見的。
屬性：

default 規定該軌道是默認的。若是用戶沒有選擇任何軌道，則使用默認軌道。
kind規定文本軌道的文本類型。可用值：
- captions 該軌道定義將在播放器中顯示的簡短說明。
- chapters 該軌道定義章節，用於導航媒介資源。
- descriptions 該軌道定義描述，用於經過音頻描述媒介的內容，假如內容不可播放或不可見。
- metadata 該軌道定義腳本使用的內容。
- subtitles 該軌道定義字幕，用於在視頻中顯示字幕。
src 規定軌道文件的URL。
srclang 規定軌道文本數據的語言。可用值應該是雙字母的語言代碼，規定軌道的語言。
label 規定文本軌道的標題。好比，當用戶選擇了字幕軌道時，標題就會顯示出來。

媒體API中與track有關的內容

addTextTrack(kind,label,language)方法
用於建立和返回新的TextTrack對象。新的TextTrack對象會被添加到媒體元素的文本軌道列表中。
videoTracks屬性
返回VideoTrackList對象，表示視頻的可用視頻軌道，每一個可用的視頻軌道是用VideoTrack對象表示的（主流瀏覽器暫不支持）。
audioTracks屬性
返回AudioTrackList對象。表示音頻/視頻的可用音頻軌道。每一個軌道用一個AudioTrack對象表示（主流瀏覽器暫不支持）。
textTracks屬性
返回TextTrackList對象，表示媒體的可用文本軌道。每一個文本軌道是用TextTrack對象表示了。這個真能用！！
TextTrack對象
表示一個文本軌道。可用屬性有：
kind 得到文本軌道的類型（能夠是 "subtitles"、"caption"、"descriptions"、"chapters" 或者 "metadata"）
label 得到文本軌道的標籤
language 得到文本軌道的語言
mode 得到或設置該軌道是不是活動的（"disabled"|"hidden"|"showing"）
cues 得到 TextTrackCueList對象的cues列表
activeCues 得到TextTrackCueList對象形式的當前活動文本軌道cues
addCue(cue) 向cues列表添加一個cue
removeCue(cue) 從cues列表刪除一個cue

這一節提到的另外還有VideoTrackList對象和VideoTrack對象，略微瞭解一下。具體說明以下：

VideoTrackList 對象

videoTracks.length 得到視頻中可用視頻軌道的數量
videoTracks.getTrackById(id)經過id得到VideoTrack對象
videoTracks[index] 經過下標index得到VideoTrack對象
videoTracks.selectedIndex得到當前VideoTrack對象的下標

VideoTrack對象
表示一個視頻軌道，可用屬性有：

id 得到視頻軌道的id
kind 得到視頻軌道的類型（能夠是"alternative"、"captions"、"main"、"sign"、"subtitles"、"commentary" 或 ""（空字符串））
label 得到視頻軌道的標籤
language 得到視頻軌道的語言
selected 得到或設置視頻軌道是不是活動的（true|false）

給HTML5媒體使用字幕

能夠看看這個連接（msdn)。這甚至能作到用JS提取每一時刻的顯示字幕,用的是TextTrackCue的API，前面未講到過，也能夠在這個頁面上看看。
使用字幕的代碼以下：

<video id="mainvideo" controls autoplay loop>  
  <track src="en_track.vtt" srclang="en" label="English" kind="caption" default>  
  <track src="cn_track.vtt" srclang="zh-cn" label="簡體中文" kind="caption">  
</video>

視頻給了兩字幕文件，一個是中文的，一個是英文的，默認英文字幕。
經常使用字幕格式爲vtt模式，是以UTF-8編碼的文本文件，MIME類型約定爲'text/vtt'，須要在服務器端進行配置。內容格式以下：

WEBVTT  
  
00:00:01.878 --> 00:00:05.334  
曾經有一份真誠的愛情放在我面前，  
  
00:00:08.608 --> 00:00:15.296  
我沒有珍惜，等我失去的時候我才後悔莫及，   
人世間最痛苦的事莫過於此。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。