多媒體

• 多媒體
  • 基本用法
  • 多媒體支持類型
  • 多媒體格式兼容
  • HTML 屬性
  • 控制多媒體
  • 多媒體相關(guān)事件
  • Web Audio API

多媒體

HTML5 前的多媒體需要借助第三方插件，例如 Flash，但是 HTML5 將網(wǎng)頁中的多媒體帶入了新的一章。

基本用法

// 音頻
// 指定資源類型可以幫助瀏覽器更快的定位解碼
<audio autobuffer autoloop loop controls>
  <source src="/media/audio.mp3" type="audio/mpeg">
  <source src="/media/audio.oga">
  <source src="/media/audio.wav">
  <object type="audio/x-wav" data="/media/audio.wav" width="290" height="45">
    <param name="src" value="/media/audio.wav">
    <param name="autoplay" value="false">
    <param name="autoStart" value="0">
    <p><a href="/media/audio.wav">Download this audio file.</a></p>
  </object>
</audio>

// 視頻
<video autobuffer autoloop loop controls width=320 height=240>
  <source src="/media/video.oga">
  <source src="/media/video.m4v">
  <object type="video/ogg" data="/media/video.oga" width="320" height="240">
  <param name="src" value="/media/video.oga">
  <param name="autoplay" value="false">
  <param name="autoStart" value="0">
  <p><a href="/media/video.oga">Download this video file.</a></p>
  </object>
</video>

多媒體支持類型

HTML5 支持音頻列表

HTML5 支持視頻列表

多媒體格式兼容

測試音頻兼容性。

var a = new Audio();
// 檢測媒體類型返回
// 支持 - 'maybe' 或 'probably'
// 不支持 - ''
a.canPlayType('audio/nav');

HTML 屬性

視頻與音頻的大部分屬性和方法幾乎相同。

控制多媒體

方法

• load() 加載資源
• play() 播放
• pause() 暫停播放

屬性

• playbackRate 1為正常速度播放，大于1為快速播放最高20。
• currentTime 調(diào)準(zhǔn)播放時間，以秒為單位。
• volume 取值范圍0到1
• muted 真假值

• paused 布爾值暫停
• seeking 布爾值跳轉(zhuǎn)
• ended 布爾值播放完成
• duration 媒體時長數(shù)值
• initialTime 媒體開始時間

多媒體相關(guān)事件

• loadstart 開始請求媒體內(nèi)容
• loadmetadata 媒體元數(shù)據(jù)以加載完成（時長，編碼格式等）
• canplay 加載一些內(nèi)容但可播放
• play 調(diào)用play()或設(shè)置 autoplay
• waiting 緩沖數(shù)據(jù)不夠，暫停播放
• playing 正在進(jìn)行播放

全部事件列表

事件列表

Web Audio API

音頻 W3C 官網(wǎng)定義在這里

Mozilla 官方音頻教程在這，以及第三方教程 1和教程 2。