HTML 音频/视频学习笔记

HTML 音频标签

HTML提供了<audio>标签用于在网页中嵌入音频。

基本用法

使用<audio>标签可以将音频文件嵌入到网页中并进行控制。具体用法如下：

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

其中，src属性指定音频文件的路径，controls属性用于在页面上显示音频播放控件。

自动播放

如果希望音频在加载完毕后自动播放，可以添加autoplay属性：

htmlCopy Code
<audio src="audio.mp3" autoplay></audio>

循环播放

如果希望音频循环播放，可以添加loop属性：

htmlCopy Code
<audio src="audio.mp3" loop></audio>

嵌入多个音轨

对于音频文件中包含多个音轨的情况，可以使用<source>标签嵌入多个音轨，并在不同情况下切换。

htmlCopy Code
<audio controls>
  <source src="audio.ogg" type="audio/ogg">
  <source src="audio.mp3" type="audio/mp3">
  <p>Your browser doesn't support HTML5 audio. Here is a <a href="audio.mp4">link to the audio</a> instead.</p>
</audio>

上面的例子中，首先尝试播放.ogg格式的音频，如果浏览器不支持，则尝试播放.mp3格式的音频。如果浏览器连.mp3都不支持，则显示一个下载链接。

HTML 视频标签

HTML提供了<video>标签用于在网页中嵌入视频。

基本用法

使用<video>标签可以将视频文件嵌入到网页中并进行控制。具体用法如下：

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

其中，src属性指定视频文件的路径，controls属性用于在页面上显示视频播放控件。

自动播放

如果希望视频在加载完毕后自动播放，可以添加autoplay属性：

htmlCopy Code
<video src="video.mp4" autoplay></video>

循环播放

如果希望视频循环播放，可以添加loop属性：

htmlCopy Code
<video src="video.mp4" loop></video>

嵌入多个视频

对于视频文件中包含多个视频的情况，可以使用多个<source>标签嵌入多个视频，并在不同情况下切换。

htmlCopy Code
<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogg" type="video/ogg">
  <p>Your browser doesn't support HTML5 video. Here is a <a href="video.mp4">link to the video</a> instead.</p>
</video>

上面的例子中，首先尝试播放.mp4格式的视频，如果浏览器不支持，则尝试播放.ogg格式的视频。如果浏览器连.ogg都不支持，则显示一个下载链接。

实例演示

以下是使用HTML音频/视频标签嵌入的实例：

htmlCopy Code
<h1>音频文件</h1>
<audio src="http://www.w3school.com.cn/i/horse.ogg" controls>
  您的浏览器不支持 audio 标签。
</audio>

<h1>视频文件</h1>
<video src="http://www.w3school.com.cn/i/movie.mp4" controls>
  您的浏览器不支持 video 标签。
</video>

以上代码在网页中嵌入了一个OGG格式的音频文件和一个MP4格式的视频文件，并在页面上显示了相应的播放控件。