HTML5标签vedio与audio详解

video标签

• 首先video标签是HTML5新增的标签
• 作用是定义视频

浏览器支持情况

元素	谷歌	火狐	欧朋	苹果	IE
video	4.0	3.5	10.5	4.0	9.0

以上版本为能支持的最早版本

video支持的视频格式

• MP4
• WebM
• Ogg

上图为各个浏览器对各种格式的支持

使用范例

<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    您的浏览器不支持 video 标签。
</video>

上述代码中因为每个浏览器支持的视频版本不相同，所以我们相同的视频最好引入不同的格式，另外两个video标签中是可以加入文字的，当浏览器不支持video标签时就会将文字显示

属性

支持HTML的全局属性

支持HTML的事件属性

audio

• 是HTML5的新标签
• 是用来定义音频的

浏览器的支持情况

其中火狐，欧朋，苹果，谷歌，ie都支持，除了ie8及其之前的版本不支持

audio支持的音频格式

• MP3
• Wav
• Ogg
  

代码示例

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  您的浏览器不支持 audio 元素。
</audio>

鉴于没给浏览器支持的音频格式都不相同，所以最好还是写上同一视频的不同格式，同样audio标签中也是可以放文字的，当浏览器不支持当前标签的时候就会显示文字

属性

支持HTML的全局属性

支持HTML的事件属性