HTML | DOM 音频视频完整参考

本文将为程序员们提供有关音频和视频的完整参考资料，包括HTML中的音频和视频标记、DOM操作和相关的属性和事件。

音频标记

HTML5引入了<audio>标记，作为音频内容的容器。可以使用以下代码片段添加音频标记：

<audio src="audio.mp3" controls></audio>

其中，src属性指定音频文件的URL，controls属性用于在浏览器中显示音频控件（例如播放/暂停按钮和音量控制器）。

此外，还可以使用<source>标记指定多种格式的音频文件，以兼容更多的浏览器，如下所示：

<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>

视频标记

与音频标记类似，HTML5还引入了<video>标记，用于嵌入视频内容。以下代码片段将在页面中添加一个视频：

<video src="video.mp4" controls></video>

其中，src属性指定视频文件的URL，controls属性用于启用视频控件。

与音频标记类似，也可以使用<source>标记指定多种格式的视频文件，以兼容更多的浏览器。

<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  Your browser does not support the video element.
</video>

DOM 操作

可以使用JavaScript操作音频和视频元素，使用<audio>和<video>标记创建实例后，可以使用以下属性和方法：

属性

• audio.videoWidth和audio.videoHeight：返回视频的宽度和高度，单位为像素。
• audio.currentTime：设置或返回单前播放位置（以秒为单位）。
• audio.duration：返回当前音频/视频的长度（以秒为单位）。
• audio.paused：返回播放是否已暂停（true/false）。
• audio.volume：设置或返回音频/视频的当前音量（0.0-1.0）。

方法

• audio.play()和audio.pause()：播放或暂停音频/视频。
• audio.load()：重新加载音频/视频。

以下代码片段演示如何使用JavaScript控制音频的播放：

var audio = document.getElementById("myAudio");
audio.play();

事件

使用JavaScript还可以监听音频/视频的事件，以便在播放过程中执行特定的操作。以下是一些可能使用的事件：

• play：在音频/视频开始播放时触发。
• pause：在音频/视频暂停时触发。
• ended：在音频/视频播放完毕时触发。
• timeupdate：在音频/视频播放位置更新时触发。
• volumechange：在音频/视频音量更改时触发。

以下代码片段演示如何监听音频的play事件：

var audio = document.getElementById("myAudio");
audio.addEventListener("play", function() {
  console.log("音频正在播放！");
});

总结

本文为程序员们提供了有关HTML音频和视频的完整参考资料，包括HTML中的音频和视频标记、DOM操控和相关的属性和事件。了解这些内容，您将能够创建交互式的音频/视频应用程序，并自定义用户交互。