详解HTML5新增的多媒体标签

编辑: admin 分类: html5 发布时间: 2023-06-09 来源:互联网

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

HTML5新增的多媒体标签

一：视频<video>

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

浏览器MP4WebMOggIEYESNONOChromeYESYESYESFirefoxYES 从Firefox21版本开始Linux系统从Firefox 30开始YESYESSafariYESNONOOperaYES 从Opera25版本开始YESYES
<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>
登录后复制

视频<video>——常见属性

属性值描述autoplayautoplay视频就绪自动播放（谷歌浏览器需添加muted来解决自动播放问题）controlscontrols向用户显示播放控件widthpixels（像素）设置播放器宽度heightpixels（像素）播放器高度looploop循环播放srcurl视频url地址posterimageurl加载等待的话面图片mutedmuted静音播放

二：音频<audio>

浏览器MP3WavOggIE 9+YESNONOChrome 6+YESYESYESFirefox 3.6+YESYESYESSafari 5+YESYESNOOpera 10+YESYESYES
<!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>
登录后复制

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

属性值描述autoplayautoplay自动播放controlscontrols向用户显示播放控件looploop循环播放srcurl视频url地址mutedmuted静音播放

多媒体标签总结

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

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

【文章转自 东台网页设计 http://www.1234xp.com/dongtai.html 提供，感恩】
更多阅读