温馨提示×

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

发布时间:2022-08-05 17:28:52 来源:亿速云 阅读:68 作者:iii 栏目:web开发

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

HTML5新增的多媒体标签

一:视频<video>

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

浏览器MP4WebMOgg
IEYESNONO
ChromeYESYESYES
FirefoxYES 从Firefox21版本开始Linux系统从Firefox 30开始YESYES
SafariYESNONO
OperaYES 从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>

浏览器MP3WavOgg
IE 9+YESNONO
Chrome 6+YESYESYES
Firefox 3.6+YESYESYES
Safari 5+YESYESNO
Opera 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控件,循环和设置大小属性

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

推荐阅读:html5新增的标签如何使用

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

主题地图