HTML5添加视频和音频

最新推荐文章于 2023-12-10 06:35:07 发布

Monster_Mawu

最新推荐文章于 2023-12-10 06:35:07 发布

阅读量285

点赞数

分类专栏：笔记文章标签： html

本文链接：https://blog.csdn.net/Monster_Mawu/article/details/108558978

版权

笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

HTML5添加视频和音频

向网页中添加视频：video标签的使用

video标签有很多属性用于控制视频的播放：

src 用于指定视频文件的路径。
poster 用于指定一个图像，在当前视频播放之前或视频数据无效时显示（预览图）。视频数据无效可能是视频正在加载，可能是视频地址错误等等。
controls
用于向浏览器指明页面制作者没有使用脚本生成播放控制器，需要浏览器提供默认的播放控件（须包括播放暂停控制、播放进度控制、音量控制等）。
loop 用于指定视频是否循环播放，是一个布尔属性。 autoplay 用于设置视频是否自动播放，是一个布尔属性。
注意：HTML中布尔属性的值不是true和false。正确的用法是，在标签中使用此属性表示true，此时属性要么没有值，要么其值恒等于它的名字；而在标签中不使用此属性表示false。
preload
用于在没有设置autoplay时定义视频是否预加载，它有三个可选择的值：none、metadata、auto。如果不使用此属性，默认为auto。

 - None：不进行预加载。使用此属性值，可能是页面制作者认为用户不期望此视频，或者减少HTTP请求。
 - Metadata：部分预加载。使用此属性值，代表页面制作者认为用户不期望此视频，但为用户提供一些元数据（包括尺寸、首帧图像、播放列表、持续时间等）。
 - Auto：全部预加载。

video标签内可以包含多个source标签：

source标签 用于给媒体指定多个可选择的（浏览器最终只能选一个）文件地址，且只能在video标签没有使用src属性时使用。浏览器按source标签的顺序检测标签指定的媒体是否能够播放（可能是媒体格式不支持，媒体不存在等等），如果不能播放，换下一个。此方法多用于兼容不同的浏览器。source标签本身不代表任何含义，不能单独出现。

此标签包含src、type、media三个属性：

src用于指定媒体的地址，和video标签的一样。
type：用于说明src属性指定媒体的类型，帮助浏览器在获取媒体前判断是否支持此类别的媒体格式。
media：用于说明媒体在何种媒介中使用，不设置时默认值为all，表示支持所有媒介。
除此之外，video标签内还可以包含当指定的视频都不能播放时，返回的内容。
示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Adding HTML5 Video</title>
  </head>
  <body>
    <video src="video/snow.mp4" 
      poster="images/snow.jpg"
      width="320" height="240" 
      controls 
      autoplay 
      loop>
      <p>A video of snow in WHU</p>
    </video>
  </body>
</html>

向网页中添加音频：audio标签的使用

audio标签有很多属性用于控制音频的播放：

src 用于指定音频文件的路径。
controls 用于表明播放器是否显示播放控件。如果没有该特性，播放控件就会默认隐藏。
loop 用于指定音频是否循环播放，是一个布尔属性。
autoplay 用于设置音频是否自动播放，是一个布尔属性。
preload 用于在没有设置autoplay时定义音频是否预加载。它可选用的值与video标签的可选值相同。

audio标签内可以包含多个source标签，其用法与video内的相同。类似地，audio标签内还可以包含当指定的音频都不能播放时，返回的内容。

示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Adding HTML5 Audio</title>
  </head>
  <body>
    <audio controls autoplay loop>
      <source src="happy birthday.mp3" type="audio/mpeg">
      <source src="happy birthday.ogg" type="audio/ogg">
      <p>This browser does not support our audio format.</p>
    </audio>
  </body>
</html>