HTML 音频/视频 DOM src 属性

在网页开发中，我们经常需要在页面中插入音频和视频元素，以丰富用户体验。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 属性，实现在用户操作或其他事件触发时更改播放内容。以下是一个示例：

// www.javascriptcn.com code example
<audio id="myAudio" controls>
  Your browser does not support the audio element.
</audio>

<button onclick="changeAudio()">Change Audio</button>

<script>
function changeAudio() {
  var audio = document.getElementById("myAudio");
  audio.src = "new_audio.mp3";
  audio.play();
}
</script>

在这个示例中，我们创建了一个按钮，当用户点击按钮时，会调用 changeAudio() 函数，动态更改音频元素的 src 属性为 new_audio.mp3，并开始播放新的音频文件。

通过学习和掌握 HTML 音频/视频 DOM 的 src 属性，我们可以更灵活地控制页面中的音频和视频内容，提升用户体验和交互性。希望本文能帮助您更好地理解和应用这一知识点。