当前位置：主页 > 查看内容

【49】HTML5 （3）——HTML5 新增多媒体标签

发布时间：2021-06-10 00:00| 有 位朋友查看

简介：★文章内容学习来源拉勾教育大前端就业集训营 多媒体标签 多媒体标签包含两个具体如下 音频 audio 视频 video 使用它们可以很方便的在页面中嵌入音频和视频而不再去使用落后的 flash 和其他浏览 器插件。 本篇文章目录 一、 audio 音频标签 HTML5 在不使用插……

★文章内容学习来源：拉勾教育大前端就业集训营

多媒体标签

  • 多媒体标签包含两个，具体如下：
  • 音频：<audio>
  • 视频：<video>
  • 使用它们可以很方便的在页面中嵌入音频和视频，而不再去使用落后的 flash 和其他浏览
    器插件。
  • 本篇文章目录：

一、<audio> 音频标签

  • HTML5 在不使用插件的情况下也可以原生的支持音频格式文件的播放，当然支持格式是有限的。
格式MIME-typeIE9Firefox3.5Opera10.5Chrome3.0Safari3.0
Oggaudio/ogg√√√
MP3audio/mpeg√√√
Wavaudio/wav√√√
  • <audio> 音频标签常见属性
属性值描述
autoplayautoplay如果出现该属性，则音频在就绪后马上播放。
controlscontrols如果出现该属性，则向用户显示控件，比如播放按钮。（在HTML5中如果标签的属性名与属性值相等，则可以省略属性值不写，但是为了页面错误较少，还是写出来）
looploop如果出现该属性，则每当音频结束时重新开始播放。
preloadpreload如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
srcurl（必须有）要播放的音频的 URL。
  • <audio> 音频标签语法格式
<audio src="文件地址" controls="controls"></audio>
  • 兼容写法
<audio controls="controls" ><!--把src属性去掉，在下面单独加两个source标签-->
   <source src="happy.mp3" type="audio/mpeg"> <!--这两个格式都设置，常见所有浏览器都可以支持-->
   <source src="happy.ogg" type="audio/ogg"> 
   您的浏览器不支持audio标签播放音频标签 <!--万一的用户的浏览器就是不支持，添加一句-->
</audio>
  • 举例
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>audio</title>
</head>
<body>
  <!-- 音频的标签和属性 -->
  <!-- <audio src="media/snow.mp3" controls="controls" preload="preload" loop></audio> -->

  <!-- 多种音频格式的兼容写法 -->
  <audio controls>
    <source src="media/snow.mp3" type="audio/mpeg"> 
    <source src="media/snow.pgg" type="audio/ogg"> 
    您的浏览器版本过低，不支持音频播放
  </audio>
</body>
</html>

在这里插入图片描述

二、<video> 视频标签

  • HTML5 在不使用插件的情况下也可以原生的支持视频格式文件的播放，当然支持格式是有
    限的。
  • 视频格式
格式MIME-typeIEFirefoxOperaChromeSafari
Oggvideo/ogg×3.5+10.5+5.0+×
MP4video/mp49.0+××5.0+3.0+
WebMvideo/webm×4.0+10.6+6.0+×
  • <video>视频标签常见属性
属性值描述
autoplayautoplay视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放问题）
controlscontrols向用户显示播放控件
looploop放完是否继续播放该视频，循环播放
preloadauto（预先加载视频）提前预加载，规定是否预加载视频(如果有了autoplay 就忽略该属性）
none（不应加载视频）规定是否预加载视频(如果有了autoplay 就忽略该属性）
srcurl视频url地址
widthpixels(像素)设置播放器宽度
heightpixels(像素)设置播放器高度
posterImgurl加载等待的画面图片
mutedmuted静音播放
  • <video> 视频标签语法格式
<video src="文件地址" controls="controls"></video>
  • 兼容写法
<video controls="controls" width="300">
   <source src="move.ogg" type="video/ogg"> 
   <source src="move.mp4" type="video/mp4"> 
   您的浏览器不支持video播放视频标签
</video>
  • 举例
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>video</title>
</head>
<body>
  <!-- 视频文件的标签和属性 -->
  <!-- <video src="media/video.mp4" controls muted="muted" width="200px" height="300px" poster="images/pig.jpg"></video> -->
  <!-- 不同的浏览器兼容写法，需要添加多个视频资源文件 -->
  <video controls width="200px">
    <source src="media/video.mp4" type="video/mp4">
    <source src="media/video.ogg" type="video/ogg">
    您的浏览器版本过低，不支持 video 视频标签
  </video>
</body>
</html>

在这里插入图片描述

三、总结

  • 音频标签和视频标签使用基本一致；
  • 浏览器支持情况不同；
  • 我们可以给视频标签添加 muted 属性进行自动静音播放视频，音频不可以；
  • 视频标签是重点，我们经常设置自动播放，循环和设置大小属性，不使用 controls 控件。

下篇继续：
【50】HTML5 （4）——HTML5 新增表单标签

；原文链接：https://blog.csdn.net/weixin_47640160/article/details/115495615
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！
上一篇：第一个项目：D触发器，DFRB1C。 下一篇：几种不常用Web API（振动、重力感应、联网状态）

推荐图文

  • 周排行
  • 月排行
  • 总排行

随机推荐