详解HTML5新增的多媒体标签

百变鹏仔 2个月前 (10-17) #H5教程

文章标签详解

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

HTML5新增的多媒体标签

一：视频

当前元素支持三种视频格式：尽量使用MP4格式

浏览器	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	静音播放

多媒体标签总结

【

文章推荐

详解HTML5新增的多媒体标签

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集