HTML5 提供了 <audio> 和 <video> 元素，使得在网页中嵌入音频和视频变得更加简单。以下是它们的基本用法：

<audio> 元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Audio</title>
</head>
<body>

<audio controls>
    <source src="example.mp3" type="audio/mp3">
    Your browser does not support the audio tag.
</audio>

</body>
</html>

在上面的示例中：

  •  <audio> 元素创建了一个音频播放器。

  •  controls 属性添加了默认的音频控制按钮（播放、暂停、音量控制等）。

  •  <source> 元素定义了音频文件的来源和类型。您可以使用多个 <source> 元素提供不同格式的音频文件，以确保兼容性。


<video> 元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Video</title>
</head>
<body>

<video width="320" height="240" controls>
    <source src="example.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

</body>
</html>

在上面的示例中：

  •  <video> 元素创建了一个视频播放器。

  •  width 和 height 属性定义了视频播放器的宽度和高度。

  •  controls 属性添加了默认的视频控制按钮。

  •  <source> 元素定义了视频文件的来源和类型。同样，您可以提供多个 <source> 元素以确保跨不同浏览器的兼容性。


请确保提供适当格式的音频和视频文件，以确保在不同的浏览器和设备上良好播放。一般来说，MP3 和 MP4 是广泛支持的格式。


转载请注明出处：http://www.zyzy.cn/article/detail/12504/HTML5