HTML5 多媒体

音频

HTML4.0 载入多媒体文件，需要是借助 Flash 实现，一般使用 embed 或者 object 元素，HTML5 新标准原生支持了音频和视频，增加了两个元素 audio & video。

<!-- controls 显示控件，默认是背景音乐 -->
<!-- autoplay 自动播放 -->
<!-- loop 循环播放 -->
<!-- preload 预加载 -->

<audio src="音频文件" controls="controls" loop="loop" preload autoplay></audio>

视频

视频的载入方式于音频类似。

<!-- poster 预览图 -->
<!-- width/height 宽高 -->
<!-- loop 循环播放 -->
<!-- autoplay 自动播放 -->
<!-- controls 显示控件 -->
<!-- preload 预加载 -->
<!-- muted 静音 -->

<video src="视频文件" poster="图片地址" controls="controls" width="600" height="600" loop="loop" autoplay preload muted></video>

<!-- 以上的很多参数是可选的，根据需要随意配搭 -->

兼容

一些特殊的多媒体格式，例如 webm ogg m4a wav ... 不同浏览器的支持稍微有点区别，HTML5 针对这一部分提供了兼容语法。

<!-- 浏览器会引入自己能识别的多媒体格式 -->

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

<audio controls ... >
    <source src="audioname.mp3">
    <source src="audioname.m4a">
    <source src="audioname.wav">
</audio>

<!-- ps：常见的格式 .mp3 .mp4 现代主流浏览器都能支持 -->