HTML音视频怎么添加：HTML的audio和video标签用法

在网页开发中，音视频内容的嵌入是提升用户体验的重要方式。HTML5引入了原生音视频支持，通过<audio>和<video>标签，开发者无需依赖第三方插件即可在网页中播放音频和视频文件。本文将详细介绍这两个标签的基本用法、常用属性以及实际使用示例。

一、<audio>标签：嵌入音频内容

<audio>标签用于在网页中嵌入音频资源，支持多种音频格式，常见的包括MP3、WAV、OGG等。不同浏览器对音频格式的支持存在差异，因此通常需要同时提供多种格式的音频文件以兼容不同浏览器。

1. 基本语法

<audio>标签的基本结构如下，内部可以包含多个<source>标签指定不同格式的音频源，还可以添加提示文本，当浏览器不支持该标签时会显示这些内容：

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  您的浏览器不支持audio标签，请升级浏览器后访问
</audio>

2. 常用属性

下表列出了<audio>标签的核心属性及其作用：

3. 使用示例

下面是一个支持自动播放（静音）、循环播放且显示控制栏的音频示例：

<audio controls autoplay loop muted>
  <source src="https://www.ipipp.com/example.mp3" type="audio/mpeg">
  <source src="https://www.ipipp.com/example.ogg" type="audio/ogg">
  您的浏览器不支持audio标签，请升级浏览器后访问
</audio>

二、<video>标签：嵌入视频内容

<video>标签用于在网页中嵌入视频资源，支持的视频格式包括MP4、WebM、OGG等，同样建议提供多种格式的文件以保证浏览器兼容性。

1. 基本语法

<video>标签的基本结构与<audio>类似，也可以通过<source>标签指定多个视频源：

<video controls width="640" height="360">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  您的浏览器不支持video标签，请升级浏览器后访问
</video>

2. 常用属性

<video>标签除了包含<audio>的大部分属性外，还有几个专属属性：

• width/height：设置视频播放器的宽度和高度，单位为像素，也可以配合CSS设置样式

• poster：指定视频加载完成前或者未播放时显示的封面图片URL

• playsinline：布尔属性，在移动端浏览器中，阻止视频全屏播放，而是在页面内嵌播放

其余与<audio>通用的属性（controls、autoplay、loop、muted、preload、src）作用与音频标签一致。

3. 使用示例

下面是一个带有封面、内嵌播放、自动播放（静音）的视频示例：

<video controls width="800" height="450" poster="https://www.ipipp.com/poster.jpg" playsinline autoplay muted>
  <source src="https://www.ipipp.com/example.mp4" type="video/mp4">
  <source src="https://www.ipipp.com/example.webm" type="video/webm">
  您的浏览器不支持video标签，请升级浏览器后访问
</video>

三、JavaScript控制音视频播放

除了通过标签属性控制音视频行为，我们还可以通过JavaScript调用音视频元素的API实现更灵活的控制，常见的控制方法如下：

// 获取audio元素
const audioElement = document.querySelector('audio');
// 播放音频
audioElement.play();
// 暂停音频
audioElement.pause();
// 跳转到10秒位置
audioElement.currentTime = 10;
// 设置音量为0.5（范围0-1）
audioElement.volume = 0.5;

// 获取video元素
const videoElement = document.querySelector('video');
// 全屏播放（需要浏览器支持Fullscreen API）
if (videoElement.requestFullscreen) {
  videoElement.requestFullscreen();
}

四、注意事项

• 音视频文件的跨域访问需要注意服务器配置CORS头，否则可能出现无法加载的问题

• 移动端浏览器对autoplay的限制更严格，通常需要用户主动交互（如点击按钮）后才能触发播放

• 若需要兼容非常旧的浏览器（如IE8及以下），则需要使用第三方插件如Flash，但当前Flash已经基本被淘汰，建议引导用户升级浏览器

• 使用<source>标签指定多个音视频源时，浏览器会按照顺序尝试加载，第一个能识别的格式会被使用

HTML5audio标签 HTML5video标签 音视频嵌入教程 JavaScript媒体控制 网页多媒体开发