码迷,mamicode.com
首页 > Web开发 > 详细

1.2 HTML5新增的多媒体标签

时间:2021-02-22 12:09:29      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:media   mod   rac   按钮   播放视频   load   block   span   基本   

1.2 HTML5新增的多媒体标签

新增的多媒体标签主要包含两个∶

  1. 音频: <audio>

  2. 视频: <video>

使用它们可以很方便的在页面中嵌入音频和视频,而不再去使用flash和其他浏览器插件。

1.2.1 视频 <video>

HTML5在不使用插件的情况下,也可以原生的支持视频格式文件的播放,当然,支持的格式是有限的。

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

浏览器MP4WebMOgg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox YES 从 Firefox 21 版本开始 Linux 系统从 Firefox 30 开始 YES YES
Safari YES NO NO
Opera YES 从 Opera 25 版本开始 YES YES
属性描述
autoplay autoplay 如果出现该属性,则视频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
height pixels 设置视频播放器的高度。
loop loop 如果出现该属性,则当媒介文件完成播放后再次开始播放。
muted muted 如果出现该属性,视频的音频输出为静音。
poster URL 规定视频正在下载时显示的图像,直到用户点击播放按钮。
preload auto metadata none 如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。
src URL 要播放的视频的 URL。
width pixels 设置视频播放器的宽度。
  <!-- <video src="./media/video.mp4" controls="controls"></video> -->
 <!-- 谷歌浏览器禁用了自动播放功能,如果想自动播放,需要添加 muted 属性 -->
 <video controls="controls" autoplay muted loop poster="./media/pig.jpg">
   <source src="movie.mp4" type="video/mp4">
   <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持 video 标签。
 </video>

 

1.2.2 音频 <audio>

当前 <audio> 元素支持三种音频格式:

浏览器MP3WavOgg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox YES YES YES
Safari YES YES NO
Opera YES YES YES
属性描述
autoplay autoplay 如果出现该属性,则音频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示音频控件(比如播放/暂停按钮)。
loop loop 如果出现该属性,则每当音频结束时重新开始播放。
muted muted 如果出现该属性,则音频输出为静音。
preload auto metadata none 规定当网页加载时,音频是否默认被加载以及如何被加载。
src URL 规定音频文件的 URL。
<audio controls>
   <!-- 注意:在 chrome 浏览器中已经禁用了 autoplay 属性 -->
   <!-- <audio src="./media/snow.mp3" controls autoplay></audio> -->
   <!-- 因为不同浏览器支持不同的格式,所以我们采取的方案是这个音频准备多个文件 -->  
 <source src="horse.ogg" type="audio/ogg">
 <source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>

1.2.3 多媒体标签总结

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

  • 多媒体标签在不同浏览器下情况不同,存在兼容性问题

  • 谷歌浏览器把音频和视频标签的自动播放都禁止

  • 谷歌浏览器中视频添加muted属性来静音播放视频,音频不可以(可以通过JavaScript解决)

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

 

1.2 HTML5新增的多媒体标签

标签:media   mod   rac   按钮   播放视频   load   block   span   基本   

原文地址:https://www.cnblogs.com/zhif97/p/14423538.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有
迷上了代码!