HTML5——音頻audio與視頻video

文件日誌地址  　　http://blog.csdn.net/q1056843325/article/details/60336226

 

音頻與視頻如今已經變得愈來愈流行
各個網站爲了保證跨瀏覽器的兼容性
仍然選擇使用flash

（源碼截自優酷）

多媒體標籤

使用

HTML5增長了audio與video兩個多媒體標籤
兼容性還不錯，低版本IE不支持
可使咱們不須要使用任何瀏覽器插件就可以插入音頻與視頻控件
並且很是的簡單

（源碼截自Bilibili）

元素用法以下

• 1 <audio src="media/xi-Halcyon.mp3" id="demoAudio">不支持H5-audio</audio>
• 2 <video src="media/Animation.mp4" id="demoVideo">不支持H5-video</video>

標籤中內容若是瀏覽器不支持該標籤就會顯示
固然使用這兩個元素的時候
最起碼要添加src屬性，屬性值就是資源的url

可是每一個瀏覽器因爲版權問題支持的媒體格式也不一樣
因此就可使用下面的方式

<audio id="demoAudio"> <source src="media/xi-Halcyon.mp3"> <source src="media/xi-Halcyon.ogg"> ... 不支持H5-audio </audio> <video id="demoVideo"> <source src="media/Animation.mp4"> <source src="media/Animation.webm"> ... 不支持H5-video </video>

這樣指定不一樣的資源格式
也保證了各個瀏覽器的兼容性

屬性

audio和video標籤除了src外
還有一些公有的屬性

屬性	描述
autoplay	設置該屬性後，音/視頻資源就緒後當即播放
controls	設置該屬性後，則顯示瀏覽器播放控制控件
loop	設置該屬性後，則音/視頻結束後從新循環開始播放
preload	設置該屬性後，則音/視頻在頁面加載時進行加載，並預備播放（使用autoplay會忽略該屬性）

前三個屬性屬性名與屬性值相同，直接添加屬性名便可
preload有以下屬性值

• none 不加載數據
• metedata 僅加載元數據（時長、比特率、幀大小等）
• auto 瀏覽器加載它認爲適量的媒體內容

好比想要在瀏覽器添加一段音樂
而且加載後當即播放，循環播放
使用瀏覽器的播放控件

• 1  <audio src="media/xi-Halcyon.mp3" id="demoVideo" autoplay controls loop></audio>

控件的樣式各個瀏覽器都不同
隨着瀏覽器版本的更新，可能還會更新樣式

---

video元素還有獨有的屬性poster
屬性值是圖片資源的url
用來設置視頻播放前的一張佔位圖片

<video src="media/Animation.mp4" id="demoVideo" width="500" height="400" poster="images/preimg.jpg" controls></video>

• 1

• 1

---

點擊播放後，視頻正常播放

腳本化音視頻

元素

使用js獲取dom節點就很簡單了

• 1  var a = document.getElementById('demoAudio');
• 2   var v = document.getElementById('demoVideo');

相似於image的Image構造函數
Audio也能夠經過相似的方式建立（Video不能夠）
區別在於Image建立的圖片是要插入文檔的
可是Audio不須要

• 1  var a = new Audio('song.mp3');

而後能夠爲它添加autoplay、loop等屬性
而後添加到頁面

接口

在獲取的DOM節點上可使用瀏覽器提供的接口屬性和方法
經常使用的屬性、方法以下

• currentSrc 媒體數據的URL地址
• volume 播放音量
  
  • 介於0~1（注意超範圍會報錯），默認1最大音量
• muted 是否靜音
  
  • 設置true進入靜音模式
• playbackRate 媒體播放速度
  
  • 默認1.0常速，>1快進，<1慢放（負值表回放但無瀏覽器實現此功能）
• defaultPlaybackRate 媒體默認的播放速度
• currentTime 當前播放時間（單位s）
• duration 媒體時長（單位s）
• play() 播放音/視頻
• pause() 暫停音/視頻
• load() 從新加載音/視頻（一般用於修改元素屬性後）

---

除此以外還有

• played 已經播放的時間段
• buffered 已經緩衝的時間段
• seekable 用戶能夠跳轉的時間段

它們都是TimeRanges對象
每一個對象都有一個length屬性（表示當前時間段）
以及start()和end()方法（返回當前時間段的起始時間點和結束時間點，單位s）
start()和end()都有一個數字參數，表示第一個時間段
肯定當前緩存內容百分比：

• 1   var percentLoaded = Math.floor(song.buffered.end(0)/song.duration*100)

---

下面三個布爾屬性表示媒體播放器的狀態

• paused 是否暫停
• seeking 是否正調到一個新的播放點
• ended 是否播放結束並中止

---

並非全部瀏覽器都支持video和audio的全部編解碼器
canPlayType()方法就是用來鑑定時候支持某一格式的媒體資源
返回字符串maybe、probably或空字符串
若是隻傳入MIME類型，則返回maybe
若是同時傳入MIME類型和編解碼器，則返回probably（可能性增長了）
只是由於媒體文件只不過是音/視頻的容器
真正決定文件可否播放的還得是編碼格式

• 1 console.log(a.canPlayType('audio/mp4')); //maybe
• 2 console.log(a.canPlayType('audio/mp4;codecs="mp4a.40.2"')); //probably

---

下面的狀態位屬性也瞭解一下

• readyState 就緒狀態
  
  • 0 = HAVE_NOTHING - 沒有關於音/視頻是否就緒的信息
  • 1 = HAVE_METADATA - 關於音頻/視頻就緒的元數據
  • 2 = HAVE_CURRENT_DATA - 關於當前播放位置的數據是可用的，但沒有足夠的數據來播放下一幀/ms
  • 3 = HAVE_FUTURE_DATA - 當前及至少下一幀的數據可用
  • 4 = HAVE_ENOUGH_DATA - 可用數據足以開始播放
• netWorkState 網絡狀態
  
  • 0 = NETWORK_EMPTY - 音/視頻還沒有初始化
  • 1 = NETWORK_IDLE - 音/視頻是活動的且已選取資源，但並未使用網絡
  • 2 = NETWORK_LOADING - 瀏覽器正在下載數據
  • 3 = NETWORK_NO_SOURCE - 未找到音/視頻來源
• error.code 錯誤狀態
  
  • 1 = MEDIA_ERR_ABORTED - 取回過程被用戶停止
  • 2 = MEDIA_ERR_NETWORK - 當下載時發生錯誤
  • 3 = MEDIA_ERR_DECODE - 當解碼時發生錯誤
  • 4 = MEDIA_ERR_SRC_NOT_SUPPORTED - 不支持音頻/視頻

事件

除了接口屬性方法之外
還有必不可少的事件模型
若是咱們不想使用瀏覽器的控件而是定義本身的播放控制組件
就要使用這套事件了

• play 播放時觸發
• pause 暫停時觸發
• loadedmetadata 瀏覽器獲取完媒體元數據時觸發
• loadeddata 瀏覽器加載完當前幀媒體數據時觸發
• ended 播放結束後中止時觸發

初次以外還有不少事件
不少不經常使用
在w3c截了一張圖

---

經過接口與事件
也能夠簡單的實現本身簡陋的音樂播放器

• 1  <button id="btn">播放</button>
• 2 <span id="cur">0s</span>/<span id="dur">0s</span><br>
• 3 音量：<input type="range" id="vol">

var audio = new Audio('media/xi-Halcyon.mp3'); var btn = document.getElementById('btn'); var vol = document.getElementById('vol'); var cur = document.getElementById('cur'); var dur = document.getElementById('dur'); var state = 'pause'; vol.value = 100; audio.onloadeddata = function(){ dur.textContent = Math.floor(audio.duration) + 's'; } setInterval(function(){ cur.textContent = Math.floor(audio.currentTime) + 's'; }, 200); btn.onclick = function(){ if(state === 'play'){ state = 'pause'; btn.textContent = '播放'; audio.pause(); }else{ state = 'play'; btn.textContent = '暫停'; audio.play(); } } vol.oninput = function(){ audio.volume = vol.value/100; }