HTML5 – 新增多媒体标签

Audio

HTML5 中新增了 Audio 标签，可以不依靠任何第三方软件和插件就能实现音频播放。

基础标签

<audio src="" controls autoplay loop></audio>

controls 必须加入，否则不会有控制面版，页面上不会看到元素

autoplay audio标签默认开始不自动播放，加入后打开自动播放

loop 播完后自动重播

Video

HTML5 中的 viedo 标签用于视频播放，可以不依靠任何第三方软件和插件就能实现视频播放。

基础标签

<video src="" controls></video>

controls 必须加入，否则不会有控制面版，页面上不会看到元素

autoplay audio标签默认开始不自动播放，加入后打开自动播放

loop 播完后自动重播

页面中出现的预览图默认为视频的第一帧

通过 poster 控制显示预览图

<video src="" controls poster="../../image/1.jpg"></video>

width 设置视频框的宽度

<video src="" controls width="600"></video>

height 设置视频框的高度

<video src="" controls height="600"></video>

注意：视频只会保持原始的宽高比，如果同时设置了宽高，并不是将视频的区域大小设置为指定的大小，只是视频框区域设置为指定大小，除非设置的宽高正好是原始的宽高比例。建议设置宽度或高度即可。

可选视频源

一般情况下，不同浏览器支持的视频格式是不一样的，如 chrome 不支持 FLV 格式视频，而傲游浏览器支持，因此可以提供多个视频源供浏览器选择它能支持的视频格式

<video controls>
  <!-- 可选视频源 -->
  <source src="../mp4格式文件" type="video/mp4">
  <source src="../flv格式文件" type="video/flv">
  <source src="../其它格式文件" type="video/...">
</video>

浏览器会自动选择自己能支持的视频格式。