html5新增多媒体标签

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

为增加网页的吸引力学习html5中新增加的两个多媒体标签，分别为视频标签< video >和音频标签< audio >

---

一、html5视频标签

• 视频< video >语法

<video src='文件地址' controls='controls'></video>

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

• 视频< video >浏览器支持文件格式

html5在不使用插件的情况下，也可以原生的支持视频文件的播放，但是其支持的文件格式是有限的。

注：因大多浏览器都支持MP4格式的视频文件，故最好将所插入视频转换为MP4格式。

• 视频< video >的常见属性
  
  注：1.controls属性一般不用（因为用controls属性的播放控件在不同浏览器中的效果不同)，而是用JS得到固定效果的播放控件。
  2.html5中视频文件的大小可用width和height调整。（类似< div >盒子大小的调整方式）

二、html5音频标签

• 音频< audio >语法

<audio src='文件地址' controls='controls'></aduio>

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

• 音频< audio >浏览器支持文件格式

html5在不使用插件的情况下，也可以原生的支持音频文件的播放，但是其支持的文件格式是有限的。

注：因大多浏览器都支持MP3格式的音频文件，故最好将所插入视频转换为MP3格式。

• 音频<. audio >的常见属性
  

总结

今天学习了html5中的新增多媒体标签，两者的差别不大，语法级属性的比较相似，学会适当在网页中运用多媒体标签，可为网页添加更多亮点并帮助用户更好的了解网页主题内容。