走進HTML5-學習多媒體，帶你實現視頻播放器、音樂播放器功能(*^▽^*)

歡迎關注個人我的博客分享一些前端技術、面試題、面試技巧等

Web 中的音頻和視頻

自 21 世紀初以來，咱們的帶寬開始可以支持任意類型的視頻在早些時候，傳統的 web 技術（如 HTML ）不可以在 Web 中嵌入音頻和視頻，因此一些像 Flash 的專利技術在處理這些內容上變得很受歡迎。這些技術可以正常的工做，可是卻有着一系列的問題，包括沒法很好的支持 HTML/CSS 特性、安全問題，以及可行性問題。

傳統的解決方案可以解決許多這樣的問題，前提是它可以正確的工做,幸運的是，幾年以後 HTML5 標準提出，其中有許多的新特性，包括 <video> 和 <audio> 標籤，以及一些 JavaScript 和 APIs 用於對其進行控制。

<audio> 音頻標籤

咱們能夠在 html 文件中使用 <audio> 標籤來插入一個音頻文件。

<!-- src 屬性指向你想要嵌入網頁當中的資源 -->
<audio id="" src=""></audio>
複製代碼

屬性

autoplay 自動播放

<!-- 這個屬性會使音頻和視頻內容當即播放，即便頁面的其餘部分尚未加載徹底。 -->
<audio src="" autoplay></audio>
複製代碼

controls 設置控件

<!-- 用戶必須可以控制視頻和音頻的回放功能。 可使用瀏覽器提供的控制接口，同時你也可使用合適的 JavaScript API構建控制接口 至少，這些媒體應該包括開始和中止，以及調整音量的功能。 -->
<audio src="" autoplay controls></audio>
複製代碼

preload 預加載

規定是在否在頁面加載後載入資源，這個屬性有三個值可選

• "none":不緩衝，不須要加載數據
• "metadata": 僅緩存文件的元數據，諸如時長，比特率，幀大小這樣的元數據，而不是媒體內容徐亞加載的
• "auto": 頁面加載後緩存媒體文件，瀏覽器應當加載它認爲適量的媒體內容

<audio src="" preload="auto"></audio>
複製代碼

loop 循環播放

是否可讓音頻或者視頻文件

<audio src="" loop></audio >
複製代碼

muted

會致使媒體播放時，默認關閉聲音。

<audio src="" muted></audio >
複製代碼

多格式支持

對於不一樣的瀏覽器對視頻或者音頻格式的支持不一樣

像 MP三、MP四、WebM這些術語叫作容器格式,他們是用不一樣的方式來播放音頻或視頻的。也就是說這些容器是用不一樣的音頻軌道、視頻軌道、元數據來呈現媒體文件的。

視頻和音頻都有不一樣的格式

• WebM 容器一般包括了 Ogg Vorbis 音頻和 VP8/VP9 視頻
  • 主要在 FireFox 和 Chrome 當中支持
• MP4 容器一般包括 AAC 以及 MP3 音頻和 H.264 視頻
  • 主要在 Internet Explorer 和 Safari 當中支持
• 老式的 Ogg 容器每每支持 Ogg Vorbis 音頻和 Ogg Theora 視頻
  • 主要在 Firefox 和 Chrome 當中支持，不過這個容器已經被更強大的 WebM 容器所取代

<audio id="music">  
  <source src="music.mp3" type="audio/mpeg">
  <source src="music.ogg" type='audio/ogg"'>
</audio>
複製代碼

如今咱們將 src 屬性從 <audio> 標籤中移除，轉而將它放在幾個單獨的標籤 <source> 當中。在這個例子當中，瀏覽器將會檢查 <source> 標籤，而且播放第一個與其自身 codec 相匹配的媒體

視頻應當包括 WebM 和 MP4 兩種格式，這兩種在目前已經足夠支持大多數平臺和瀏覽器。

每一個 <source> 標籤頁含有一個 type 屬性，這個屬性是可選的,可是建議添加上這個屬性——它包含了<source> 標籤文件的 MIME types,同時在瀏覽器檢索的時候也會迅速的跳過那些不支持的格式，找到能正確播放的格式。

<video> 視頻標籤

<audio> 標籤與 <video> 標籤的使用方式幾乎徹底相同,有一些細微的差異咱們下邊一一介紹

屬性

width/height

控制視頻的尺寸，可使用屬性，也可使用 Css 來控制視頻的尺寸。不管哪一種方式，視頻都會保持它原始的縱橫比。若是你設置的尺寸沒有保持視頻原始的長寬比，那麼視頻的邊框將會拉伸，而未被視頻內容填充的部分，將會顯示默認的背景顏色。

poster

當時視頻不可用時，使用一張圖片替代，不然是空白

指向了一個圖像的URL，這個圖像會在視頻播放前顯示。一般用於粗略的預覽或者廣告。

<video id="" poster="封面.jpg" controls></video>>
複製代碼

當咱們使用了 autoplay 屬性時，當頁面一加載就播放視頻的話，就不會看到 poster 的效果了。

腳本化

當咱們在元素上設置了 controls 屬性時，瀏覽器會顯示原生的瀏覽器控件，當你想要修改這些樣式的時候，能夠經過隱藏本地控件， JavaScript API 來進行相應的設置。

獲取 Dom

// 獲取到對應的 `dom` 元素
let audio = document.getElementById('audio')
複製代碼

// 使用 js 建立標籤
// audio 可使用 new 操做符
let audio = new Audio('音頻文件')
let video = document.createElement('video');
複製代碼

自定義控件

爲了設置當前的控件樣式，須要將默認的控件刪除。

audio.removeAttribute('controls');
// 使用屬性 Boolean 值
audio.controls = false
複製代碼

// 其餘的屬性設置
audio.loop = 'loop'
audio.preload = 'auto'
audio.autoplay = true
複製代碼

播放與暫停

經過使用play()和pause()方法來控制音頻視頻的播放和暫停,經過paused屬性查詢媒體播放狀態

if (audio.paused) {
  audio.play()
} else {
  audio.pause()
}
複製代碼

咱們使用if語句來檢查視頻是否暫停。若是視頻已暫停，audio.paused屬性返回true，包括在第一次加載時處於0的時間段都是視頻的暫停狀態。

當咱們在想實現視頻中止功能時，點擊中止，視頻中止播放，播放時間返回0。無奈的是在 API 中並無中止的方法，咱們能夠經過設置currentTime屬性來設置當前的播放位置,將它設置爲0，將會馬上跳到該位置。

function stop(){
  audio.pause()
  audio.currentTime = 0
}
複製代碼

播放速率

咱們能夠經過設置播放速率，進而實現快退快進的功能。 playbackRate設置媒體文件播放時的速率。這用於實現讓用戶控制快放、慢放等。 正常播放速率乘以該值表示當前的播放速率，因此1.0表示一個正常的播放速率。

// 浮點數1.0 是 "正常速度"， 比 1.0 小的值使媒體文件播放的慢於正常速度，比1.0大的值使播放變得快於正常速度.
audio.playbackRate = 1.0
複製代碼

也能夠經過定時器，經過設置當前播放時間來實現快進快退

function backWard() {
  // 快退
  if(audio.currentTime <= 3) {
    // 當資源已經回退到最初了
    clearInterval(intervalRwd)
    stop()
  } else {
    audio.currentTime -= 3
  }
}

function forWard() {
  // 快進
  if(audio.currentTime >= audio.duration -3) {
    // 當資源已經快進到最後了
    clearInterval(intervalFwd)
    stop()
  } else {
      audio.currentTime += 3
    }
}
複製代碼

更新當前播放時間

當須要設置播放器的顯示時間時，咱們將運行一個函數，以便在元素播放過程當中timeupdate事件觸發時更新當前播放時間和播放進度。

function setTime() {
  // 首先咱們計算到當前的播放時間
  let minutes = Math.floor(audio.currentTime / 60);
  let seconds = Math.floor(audio.currentTime - minutes * 60);
  let minuteValue;
  let secondValue;
  // 進行格式轉換，當分鐘小於10的時候，在前面加0
  if (minutes < 10) {
    minuteValue = '0' + minutes;
  } else {
    minuteValue = minutes;
  }
  // 秒數的格式設置
  if (seconds < 10) {
    secondValue = '0' + seconds;
  } else {
    secondValue = seconds;
  }
  // 進行時間值拼接，展現到頁面
  let audioTime = minuteValue + ':' + secondValue;
  timer.textContent = audioTime;
  // 進度條的長度計算
  let barLength = timerWrapper.clientWidth * (audio.currentTime/audio.duration);
  timerBar.style.width = barLength + 'px';
}
複製代碼

音量

能夠經過 volume 屬性設置播放音量，介於0(靜音)~1(最大音量)之間，默認爲1。將 muted 屬性設置爲true則會進入靜音屬性(模式)，設置爲false則會恢復以前指定的音量繼續播放。

audio.volume=0.2;
複製代碼

緩衝 TimeRanges對象

played 屬性返回 TimeRanges 對象，表示已經播放(看過)的時間段 已播範圍指的是被播放音頻/視頻的時間範圍。若是用戶在音頻/視頻中跳躍，則會得到多個播放範圍。

buffered 屬性返回 TimeRanges 對象，表示已經緩存的時間段 緩衝範圍指的是已緩衝音視頻的時間範圍。若是用戶在音視頻中跳躍播放，會獲得多個緩衝範圍。

seekable 屬性返回 TimeRanges 對象，表示用戶能夠調轉的時間段 可尋址範圍指的是用戶在音頻/視頻中可尋址（移動播放位置）的時間範圍。

// 返回起始時間點和結束時間點，單位是秒，其實參數爲0
audio.played.start(0)
audio.played.end(0)
audio.buffered.start(0)
audio.buffered.end(0)
audio.seekable.start(0)
audio.seekable.end(0)
複製代碼

媒體播放狀態

• paused 爲 true 時，表示播放器暫停
• seeking 爲 true 時，表示播放器正在跳到一個新的播放點
• ended 爲 true 時，播放器播放完媒體會停下來

下面的代碼肯定當前緩存內容的百分比

let percent_loaded = Math.floor(song.buffered.end(0) / song.duration * 100)
複製代碼

事件

• 當音頻/視頻處於加載過程當中時，會依次發生如下事件：
  • loadstart 當瀏覽器開始查找資源時觸發
  • durationchange 當資源時長已更改時
  • loadedmetadata 當瀏覽器獲取完媒體的元數據時觸發
  • loadeddata 瀏覽器已經加載完當前幀數據，準備播放時觸發
  • progress 當瀏覽器正在下載資源時
  • canplay 當瀏覽器能夠播放資源時
  • canplaythrough 當瀏覽器可在不因緩衝而停頓的狀況下進行播放時
• play 當資源已經開始播放時
• pause 當資源暫停時
• retechange 當資源播放速度已更改時
• seeked 當用戶已經移動/跳躍到音頻/視頻中的新位置時
• stalled 當瀏覽器嘗試獲取媒體數據，但數據不可用時
• volumechange 當音量發生改變時
• error 當在資源加載期間發生錯誤時
• ended 當播放結束時觸發

兼容文件

在使用資源文件時，須要考慮到當前瀏覽器是否支持當前的文件格式，咱們可使用canPlayType()方法來作兼容

let a = new Audio()
if(a.canPlayType('audio/mp3')){
  a.src = './audio.mp3';
  a.play();
}
複製代碼

當你看到這的時候是否是有種懵逼的感受，接下來給你送上兩個demo源碼看看這些API是怎麼使用的吧 視頻播放器插件和音樂播放器歌詞滾動效果

---

但願對讀完本文的你有幫助、有啓發，若是有不足之處，歡迎批評指正交流！

歡迎關注個人我的博客分享一些前端技術、面試題、面試技巧等

辛苦整理良久，還望手動點贊鼓勵~

---

'摘抄'不是單純的「粘貼->複製」，而是眼到，手到，心到的一字一句敲打下來。

博客聲明:全部轉載的文章、圖片僅用於做者本人收藏學習目的，被要求或認爲適當時，將標註署名與來源。若不肯某一做品被轉用，請及時通知本站，本站將予以及時刪除。