HTML5视频播放标签video和音频播放标签audio标签的正确用法

HTML5视频播放标签video和音频播放标签audio是目前网页中最常用的嵌入多媒体内容的标签。下面是这两个标签的正确用法攻略：

1. HTML5视频播放标签video的正确用法

1.1 定义视频源

首先，需要定义视频源并加载视频文件。可以使用 source 标签来定义视频源，source 标签中的 src 属性指向视频文件的链接地址，type 属性定义视频文件的格式。可以使用多个源标签，用于兼容不同的浏览器。

以下是一个视频源的例子：

<video width="640" height="360" controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <source src="video.ogv" type="video/ogg">
</video>

• controls 属性用于显示默认的控制条和播放暂停按钮等控制按钮，推荐使用。
• width 和 height 属性用于设置视频的宽高。

1.2 定义其他属性

除了上述的属性之外，还可以定义以下属性：

• poster：定义视频的封面图像，一般在视频未播放时展示。可选。
• autoplay：设置视频在加载后自动播放。可选。
• loop：设置视频在播放完毕后重新开始循环播放。可选。
• muted：设置视频静音。可选。

以下是一个包含所有属性的例子：

<video width="640" height="360" poster="poster.jpg" controls autoplay loop muted>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <source src="video.ogv" type="video/ogg">
</video>

2. HTML5音频播放标签audio的正确用法

2.1 定义音频源

和视频播放一样，首先需要定义音频源并加载音频文件。可以使用 source 标签来定义音频源，source 标签中的 src 属性指向音频文件的链接地址，type 属性定义音频文件的格式。可以使用多个源标签，用于兼容不同的浏览器。

以下是一个音频源的例子：

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  <source src="audio.wav" type="audio/x-wav">
</audio>

• controls 属性用于显示默认的控制条和播放暂停按钮等控制按钮，推荐使用。

2.2 定义其他属性

除了上述的属性之外，还可以定义以下属性：

• autoplay：设置音频在加载后自动播放。可选。
• loop：设置音频在播放完毕后重新开始循环播放。可选。
• muted：设置音频静音。可选。

以下是一个包含所有属性的例子：

<audio controls autoplay loop muted>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  <source src="audio.wav" type="audio/x-wav">
</audio>

以上就是 HTML5视频播放标签video和音频播放标签audio标签的正确用法的攻略。