HTML5 video 和 audio

video

用於在HTML或者XHTML文檔中嵌入視頻內容

使用 video 元素至少要提供兩種視頻格式的文件：OGG 和 MP4

1. OGG：採用 Theora 視頻格式和 Vorbis 音頻解碼器 （目前比較主流的視頻格式）
2. MPEG-4：採用 H.264 視頻格式和 AAC 音頻解碼器 (手機端的視頻格式)
3. WebM：採用 VP8 視頻和 Ogg Vorbis (目前唯一 一個支持超高清視頻格式)
   • 該視頻格式出自 Google 公司

video 元素中可以使用 source 子元素來向瀏覽器提供備選視頻格式，註意 source 元素是單標簽

作用：實現各個瀏覽器的相容性

<video>
    <source src="xxx.mp4">
    <source src="xxx.ogg">
    <source src="xxx.webm">
</video>

video 元素的屬性

• controls：用於顯示瀏覽器所提供的視頻控制項按鈕
• autoplay：設置這個屬性以後，視頻會自動播放
• poster：該屬性指定一個 URL（相對URL / 絕對URL），用於在視頻播放之前顯示一張圖片，視頻開始播放後圖片自動消失
• preload：預載入，該屬性可以設置三個值
  1. none：不緩存視頻，減少不必要的流量
  2. metadata：只載入除視頻之外的信息（寬和高）
  3. auto：預設值，要求瀏覽器儘可能快地下載視頻
• loop：設置這個屬性後，視頻將會自動迴圈播放

<video autoplay controls poster="xxx.png" preload="auto" loop></video>

HTML5 新加入的 API

事件名稱

• progress

• pause：視頻暫停時觸發

  var media = document.getElementById('media');
  media.addEventListener('pause', function(){
  alert('暫停');
  }, false);

• play：視頻開始播放時觸發

  var media = document.getElementById('media');
  media.addEventListener('play', function(){
  alert('開始播放');
  }, false);

• ended：視頻到達末尾時觸發

  var media = document.getElementById('media');
  media.addEventListener('ended', function(){
  alert('播放完畢');
  }, false);

• canplay：視頻能夠播放時就會觸發

HTML5 新增的媒體處理方法

• play（）：播放媒體文件
• pause（）：暫停播放
• load（）：載入視頻

HTML5 新增的針對視頻元素處理屬性

• ended：視頻結束播放，值為true
• paused：視頻處於暫停或沒播放狀態，值為true
• currentTime：獲取或者設置視頻播放的位置
• duration：視頻的時長

audio

audio 元素可以實現在 HTML 頁面中嵌入音頻內容，該元素的屬性可以設置是否自動播放、預載入及迴圈播放等

audio 元素提供了播放、暫停和音量控制項來控制音頻

使用 audio 元素提供三種音頻格式的文件：mp3、Ogg 和 Wav

• MP3：採用 mpeg 音頻解碼器
• Ogg：採用 ogg 音頻解碼器
• Wav：採用 wav 音頻解碼器