要在 HTML 中添加音频或视频播放列表,需要使用 <audio>
或 <video>
标签,并将其中的 src
属性设置为音频或视频文件的 URL。如果要创建播放列表,可以使用 <ol>
或 <ul>
标签来包装多个 <audio>
或 <video>
标签。
以下是一个示例代码,展示如何创建一个包含多个音频文件的播放列表:
<ol>
<li>
<audio controls>
<source src="audio1.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
</li>
<li>
<audio controls>
<source src="audio2.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
</li>
<li>
<audio controls>
<source src="audio3.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
</li>
</ol>
在这个示例中,我们使用了 <ol>
标签来创建一个有序列表,其中包含三个不同的音频文件。每个音频文件都使用 <audio>
标签来包装,并设置了 src
属性为音频文件的 URL。<source>
标签则用来指定音频文件的 MIME 类型。controls
属性用来向用户展示音频控制面板,以便他们可以播放、暂停、停止或调整音量。
类似地,如果要创建一个视频播放列表,可以使用类似的代码,只需将 <audio>
标签替换为 <video>
标签,并将音频文件的 URL 替换为视频文件的 URL。
<ol>
<li>
<video controls>
<source src="video1.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</li>
<li>
<video controls>
<source src="video2.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</li>
<li>
<video controls>
<source src="video3.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</li>
</ol>
注意,以上示例代码中的 type
属性值是 MIME 类型,用于告诉浏览器如何解析音频或视频文件。需要根据实际文件类型设置 type
属性值。另外,如果浏览器不支持 <audio>
或 <video>
标签,则会显示 Your browser does not support the audio/video tag.
的备用文本。