HTML5新增的多媒体标签怎么使用

这篇“HTML5新增的多媒体标签怎么使用”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“HTML5新增的多媒体标签怎么使用”文章吧。

创新互联公司提供成都网站设计、做网站、网页设计,品牌网站建设1元广告等致力于企业网站建设与公司网站制作,10年的网站开发和建站经验,助力企业信息化建设,成功案例突破数千家,是您实现网站建设的好选择.

HTML5新增的多媒体标签

一:视频

当前

浏览器MP4WebMOgg
IEYESNONO
ChromeYESYESYES
FirefoxYES 从Firefox21版本开始Linux系统从Firefox 30开始YESYES
SafariYESNONO
OperaYES 从Opera25版本开始YESYES

    
    
    您的浏览器暂不支持

视频

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

二:音频

浏览器MP3WavOgg
IE 9+YESNONO
Chrome 6+YESYESYES
Firefox 3.6+YESYESYES
Safari 5+YESYESNO
Opera 10+YESYESYES



   
   HTML5音频标签
   
   
   您的浏览器不支持audio元素
   
   

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

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

多媒体标签总结

  • 音频标签和视频标签使用方式基本一致

  • 浏览器支持情况不同

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

  • 我们可以给视频标签加muted属性来静音播放视频,音频不可以(可以通过JavaScript来解决)

  • 视频标签是重点,我们经常设置自动播放,不适用conrols控件,循环和设置大小属性

以上就是关于“HTML5新增的多媒体标签怎么使用”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注创新互联行业资讯频道。


网页名称:HTML5新增的多媒体标签怎么使用
本文地址:http://ybzwz.com/article/ggippo.html