详解HTML5新增的多媒体标签

本篇文章给大家介绍HTML常用的多媒体标签及HTML5新增的多媒体标签，希望对需要的朋友有帮助！

一：视频

当前

浏览器	MP4	WebM	Ogg
IE	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES 从Firefox21版本开始Linux系统从Firefox 30开始	YES	YES
Safari	YES	NO	NO
Opera	YES 从Opera25版本开始	YES	YES

<video controls="controls" autoplay="autoplay" muted="muted" width="500px" height="400px" loop="loop" poster="images/tudou.jpg" preload="none">
    <source src="medio/mov_bbb.mp4">
    <source src="medio/mov_bbb.ogg">
    您的浏览器暂不支持<video>标签播放视频</video>

视频

属性	值	描述
autoplay	autoplay	视频就绪自动播放（谷歌浏览器需添加muted来解决自动播放问题）
controls	controls	向用户显示播放控件
width	pixels（像素）	设置播放器宽度
height	pixels（像素）	播放器高度
loop	loop	循环播放
src	url	视频url地址
poster	imageurl	加载等待的话面图片
muted	muted	静音播放

二：音频

浏览器	MP3	Wav	Ogg
IE 9+	YES	NO	NO
Chrome 6+	YES	YES	YES
Firefox 3.6+	YES	YES	YES
Safari 5+	YES	YES	NO
Opera 10+	YES	YES	YES

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>HTML5音频标签</title></head><body>
   <audio controls="controls" autoplay="autoplay" muted="muted" loop="loop">
   <source src="medio/music.mp3" type="audio/mpeg">
   您的浏览器不支持audio元素</audio>
   </body>
   </html>

谷歌浏览器把音频和视频自动播放禁止了

属性	值	描述
autoplay	autoplay	自动播放
controls	controls	向用户显示播放控件
loop	loop	循环播放
src	url	视频url地址
muted	muted	静音播放

多媒体标签总结

音频标签和视频标签使用方式基本一致
浏览器支持情况不同
谷歌浏览器把音频和视频自动播放禁止了
我们可以给视频标签加muted属性来静音播放视频，音频不可以（可以通过JavaScript来解决）
视频标签是重点，我们经常设置自动播放，不适用conrols控件，循环和设置大小属性

【相关推荐：css视频教程】

以上就是详解HTML5新增的多媒体标签的详细内容，更多请关注www.sxiaw.com其它相关文章！