使用多媒体标签可以很方便在页面中嵌入音频和视频，而不再去使用落后的 FLASH 和其它浏览器插件

音频

格式 MIME-type IE9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
Ogg audio/ogg

✔️

|

✔️

|

✔️

| | | MP3 | audio/mpeg |

✔️

| | |

✔️

|

✔️

| | Wav | audio/wav | |

✔️

|

✔️

| |

✔️

|

  1. <audio src="" controls="controls"></audio>
  • autoplay 就绪后马上播放
  • controls 显示控件
  • loop 循环播放
  • preload 页面加载时进行预载，如果使用 autoplay 则忽略
  • src URL

    兼容写法

    <audio controls="controls">
<source src="happy.mp3" type="audio/mpeg">
<source src="happy.ogg" type="audio/ogg">
你的浏览器暂不支持 audio 标签
</audio>

    视频

    | 格式 | MIME-type | IE | Firefox | Opera | Chrome | Safari | | —- | —- | —- | —- | —- | —- | —- | | Ogg | video/ogg |

    ❌

    | 3.5+ | 10.5+ | 5.0+ |

    ❌

    | | MP4 | video/mp4 | 9.0+ |

    ❌

    |

    ❌

    | 5.0+ | 3.0+ | | Webm | video/Webm |

    ❌

    | 4.0+ | 10.6+ | 6.0+ |

    ❌

    |
<video src="" controls="controls"></video>
  • autoplay 就绪后马上播放
    • Chrome 需要添加 muted 来解决自动播放问题
  • controls 显示控件
  • loop 循环播放
  • preload
    • auto 预加载
    • none 不就加载
      • 如果使用 autoplay 则忽略
  • src URL
  • width 播放器宽度
  • height 播放器高度
  • poster 加载等待画面图片
  • muted 静音播放

    兼容写法

    <video controls="controls">
<source src="happy.mp4" type="video/mp4">
<source src="happy.ogg" type="video/ogg">
你的浏览器暂不支持 audio 标签
</video>