Day 21 HTML5 <HTML5 多媒体标签>

多媒体标签可以很方便的在页面中嵌入音频和视频，而不用去使用flash和其他浏览器的插件，多媒体标签主要分为视频标签、音频标签

1.视频标签

<video>

当前<video>元素支持MP4、Ogg、WebM三种视频格式，考虑到各种浏览器的相容性
尽量使用mp4格式。

语法 :

css
<video src = "文件地址" controls = "controls"> </video>

<video controls="controls" width="300">
<source src="media/mi_video_show.mp4" type="video/egg">
<source src="media/mi_video_show.mp4" type="video/mp4">
</video>

视频标签常用属性

<!-- 
    autoplay     ---     视频自动拨放
    controls     ---     显示播放操作件
    width        ---     设置播放器宽度
    heigth       ---     设置播放器高度
    loop         ---     设置是否循环拨放
    preload      ---     是否预先加载视频(auto预先加载/none不预先加载)
    src          ---     视频URL地址
    poster       ---     设置加载等待的画面图面
    muted        ---     静音拨放
 -->

2.音频标签

<audio>

<audio>元素支持MP3、Wav、Ogg三种音频格式，考虑到各种浏览器的相容性
尽量使用mp3格式。

语法 :
<audio src = "文件地址" controls="controls"></audio>

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

音频标签常用属性

<!-- 
autoplay       ---     音频就绪後自动拨放
controls       ---     显示播放操作件
loop           ---     设置是否循环拨放
src            ---     音频URL地址
-->

备注 :　google浏览器把音频和视频自动拨放禁止需要使用JS解决