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

多媒体标签

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

一、<audio> 音频标签

  • HTML5 在不使用插件的情况下也可以原生的支持音频格式文件的播放，当然支持格式是有限的。
格式 MIME-type IE9 Firefox3.5 Opera10.5 Chrome3.0 Safari3.0
Ogg audio/ogg √ √ √
MP3 audio/mpeg √ √ √
Wav audio/wav √ √ √
  • <audio> 音频标签常见属性
属性 值 描述
autoplay autoplay 如果出现该属性，则音频在就绪后马上播放。
controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。（在HTML5中如果标签的属性名与属性值相等，则可以省略属性值不写，但是为了页面错误较少，还是写出来）
loop loop 如果出现该属性，则每当音频结束时重新开始播放。
preload preload 如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
src url （必须有）要播放的音频的 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-type IE Firefox Opera Chrome Safari
Ogg video/ogg × 3.5+ 10.5+ 5.0+ ×
MP4 video/mp4 9.0+ × × 5.0+ 3.0+
WebM video/webm × 4.0+ 10.6+ 6.0+ ×
  • <video>视频标签常见属性
属性 值 描述
autoplay autoplay 视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放问题）
controls controls 向用户显示播放控件
loop loop 放完是否继续播放该视频，循环播放
preload auto（预先加载视频） 提前预加载，规定是否预加载视频(如果有了autoplay 就忽略该属性）
none（不应加载视频） 规定是否预加载视频(如果有了autoplay 就忽略该属性）
src url 视频url地址
width pixels(像素) 设置播放器宽度
height pixels(像素) 设置播放器高度
poster Imgurl 加载等待的画面图片
muted muted 静音播放
  • <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 新增表单标签