在网页开发中，我们经常需要在页面中插入音频和视频元素，以丰富用户体验。HTML 提供了 <audio> 和 <video> 标签，通过设置它们的 src 属性，可以指定要播放的音频或视频文件的 URL。
<audio> 标签
<audio> 标签用于在页面中嵌入音频内容。通过设置 src 属性，可以指定要播放的音频文件的 URL。以下是一个简单的示例：
<audio controls src="audio.mp3"> Your browser does not support the audio element. </audio>
在这个示例中，我们创建了一个包含音频文件 audio.mp3 的 <audio> 元素，并添加了 controls 属性，以在页面上显示音频播放控件。
<video> 标签
<video> 标签用于在页面中嵌入视频内容。与音频标签类似，通过设置 src 属性，可以指定要播放的视频文件的 URL。以下是一个简单的示例：
<video controls src="video.mp4"> Your browser does not support the video element. </video>
在这个示例中，我们创建了一个包含视频文件 video.mp4 的 <video> 元素，并添加了 controls 属性，以在页面上显示视频播放控件。
动态设置 src 属性
除了在静态页面中设置 src 属性外，我们还可以通过 JavaScript 动态设置音频/视频元素的 src 属性，实现在用户操作或其他事件触发时更改播放内容。以下是一个示例：
-- -------------------- ---- ------- ------ ------------ --------- ---- ------- ---- --- ------- --- ----- -------- -------- ------- ------------------------------ -------------- -------- -------- ------------- - --- ----- - ----------------------------------- --------- - ---------------- ------------- - ---------
在这个示例中，我们创建了一个按钮，当用户点击按钮时，会调用 changeAudio() 函数，动态更改音频元素的 src 属性为 new_audio.mp3，并开始播放新的音频文件。
通过学习和掌握 HTML 音频/视频 DOM 的 src 属性，我们可以更灵活地控制页面中的音频和视频内容，提升用户体验和交互性。希望本文能帮助您更好地理解和应用这一知识点。