HTML5如何使用音频和视频？

HTML5 通过 <audio> 和 <video> 标签以及 JavaScript API 提供了对音频和视频的原生支持，无需依赖 Flash 或其他插件。

以下是使用方法：

1. <audio> 标签 (音频):

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>

• controls 属性: 显示浏览器默认的音频控件（播放/暂停、音量、进度条等）。
• <source> 标签: 允许指定多个音频源，浏览器会按顺序尝试加载，直到找到兼容的格式。 type 属性指定 MIME 类型，有助于浏览器快速识别。
• 标签内的文本: 在浏览器不支持 <audio> 标签时显示。

2. <video> 标签 (视频):

<video width="640" height="360" controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

• width 和 height 属性: 指定视频的尺寸。
• controls 属性: 显示浏览器默认的视频控件。
• <source> 标签: 类似于 <audio>，允许指定多个视频源。
• 标签内的文本: 在浏览器不支持 <video> 标签时显示。

常用属性:

• autoplay: 自动播放 (某些浏览器限制自动播放，尤其是在移动设备上)。
• loop: 循环播放。
• muted: 静音。
• poster (仅限 <video>): 指定视频加载前的预览图像。
• preload: 控制预加载行为 (none, metadata, auto)。

JavaScript API:

可以使用 JavaScript 控制音频和视频播放，例如：

const video = document.querySelector('video');

video.play(); // 播放
video.pause(); // 暂停
video.currentTime = 10; // 跳转到第 10 秒
video.volume = 0.5; // 设置音量为 50%

video.addEventListener('ended', () => {
  console.log('Video ended');
});

支持的音频/视频格式:

浏览器对音频和视频格式的支持有所不同。常用的格式包括：

• 音频: MP3, AAC, OGG, WAV
• 视频: MP4, WebM, Ogg

最佳实践:

• 提供多种格式: 使用 <source> 标签提供多种格式的音频/视频，以确保兼容性。
• 优化文件大小: 使用合适的压缩工具减小文件大小，提高加载速度。
• 使用视频海报: 使用 poster 属性提供视频海报，提升用户体验。
• 考虑移动设备: 注意移动设备上的自动播放限制和带宽限制。

通过结合 HTML5 标签和 JavaScript API，可以轻松地在网页中嵌入和控制音频和视频内容，提供丰富的用户体验。