HTML5新增的多媒体标签怎么使用
更新:HHH   时间:2023-1-7


这篇“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新增的多媒体标签怎么使用”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注天达云行业资讯频道。

返回web开发教程...