Table of Contents generated with DocToc

多媒体

HTML5 前的多媒体需要借助第三方插件，例如 Flash，但是 HTML5 将网页中的多媒体带入了新的一章。

多媒体（视频与音频） - 图1

基本用法

  1. // 音频
  2. // 指定资源类型可以帮助浏览器更快的定位解码
  3. <audio autobuffer autoloop loop controls>
  4.   <source src="/media/audio.mp3" type="audio/mpeg">
  5.   <source src="/media/audio.oga">
  6.   <source src="/media/audio.wav">
  7.   <object type="audio/x-wav" data="/media/audio.wav" width="290" height="45">
  8.     <param name="src" value="/media/audio.wav">
  9.     <param name="autoplay" value="false">
  10.     <param name="autoStart" value="0">
  11.     <p><a href="/media/audio.wav">Download this audio file.</a></p>
  12.   </object>
  13. </audio>
  15. // 视频
  16. <video autobuffer autoloop loop controls width=320 height=240>
  17.   <source src="/media/video.oga">
  18.   <source src="/media/video.m4v">
  19.   <object type="video/ogg" data="/media/video.oga" width="320" height="240">
  20.   <param name="src" value="/media/video.oga">
  21.   <param name="autoplay" value="false">
  22.   <param name="autoStart" value="0">
  23.   <p><a href="/media/video.oga">Download this video file.</a></p>
  24.   </object>
  25. </video>

多媒体支持类型

HTML5 支持音频列表

HTML5 支持视频列表

多媒体格式兼容

测试音频兼容性。

  1. var a = new Audio();
  2. // 检测媒体类型返回
  3. // 支持 - 'maybe' 或 'probably'
  4. // 不支持 - ''
  5. a.canPlayType('audio/nav');

HTML 属性

视频与音频的大部分属性和方法几乎相同。

属性 是否必须 默认值 备注
src 是 音频文件地址 URL
controls 否 false 显示控件
autoplay 否 false 音频就绪后自动播放
preload 否 none 可取值为 none、metadata、auto。音频在页面加载是进行加载，并预备播放。如果使用 autoplay 则忽略该属性（该属性失效）
loop 否 false 是否循环播放

控制多媒体

方法

  • load() 加载资源
  • play() 播放
  • pause() 暂停播放

属性

  • playbackRate 1为正常速度播放，大于1为快速播放最高20。
  • currentTime 调准播放时间，以秒为单位。
  • volume 取值范围0到1
  • muted 真假值
  • paused 布尔值暂停
  • seeking 布尔值跳转
  • ended 布尔值播放完成
  • duration 媒体时长数值
  • initialTime 媒体开始时间

多媒体相关事件

  • loadstart 开始请求媒体内容
  • loadmetadata 媒体元数据以加载完成（时长，编码格式等）
  • canplay 加载一些内容但可播放
  • play 调用play()或设置 autoplay
  • waiting 缓冲数据不够，暂停播放
  • playing 正在进行播放

全部事件列表

事件列表

Web Audio API

音频 W3C 官网定义在这里

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