HTML 5视频或音频播放列表

在本文中，我们将介绍HTML 5中的视频和音频播放功能，并详细说明如何创建播放列表。

阅读更多：HTML 教程

HTML 5视频播放

HTML 5通过<video>元素提供了视频播放的内置支持。我们可以使用<source>元素在<video>标签内指定不同的视频源，以便在不同的浏览器上提供兼容性。

以下是一个简单的HTML代码示例，用于嵌入一个视频文件：

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

在上面的代码中，<video>标签内的<source>元素指定了两种不同的视频源文件，分别是video.mp4和video.ogg。浏览器将根据支持的视频格式自动选择适合的源文件进行播放。如果浏览器不支持<video>标签，就会显示Your browser does not support the video tag.作为替代内容。

可以使用controls属性在视频上显示控制按钮，如播放、暂停、音量、全屏等。另外，还可以添加其他属性来进一步自定义视频播放的样式和行为。

HTML 5音频播放

与视频播放类似，HTML 5中也提供了音频播放的内置支持。我们可以使用<audio>元素来嵌入音频文件。

以下是一个简单的HTML代码示例，用于嵌入一个音频文件：

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  Your browser does not support the audio tag.
</audio>

与视频播放一样，<audio>标签内的<source>元素指定了两种不同的音频源文件，分别是audio.mp3和audio.ogg。浏览器将自动选择支持的音频格式进行播放。如果浏览器不支持<audio>标签，就会显示Your browser does not support the audio tag.作为替代内容。

同样，我们可以使用controls属性显示音频控制按钮，并通过其他属性来自定义音频播放的样式和行为。

创建音视频播放列表

在HTML 5中，我们还可以通过使用JavaScript动态地创建音视频播放列表。这可以通过在页面中添加多个<source>元素和相关的JavaScript代码来实现。

以下是一个示例代码，演示如何创建一个简单的音视频播放列表：

<div>
  <h2>我的播放列表</h2>
  <ul id="playlist">
    <li>
      <a href="#" onclick="playVideo('video1')">视频1</a>
    </li>
    <li>
      <a href="#" onclick="playVideo('video2')">视频2</a>
    </li>
    <li>
      <a href="#" onclick="playAudio('audio1')">音频1</a>
    </li>
    <li>
      <a href="#" onclick="playAudio('audio2')">音频2</a>
    </li>
  </ul>
</div>

<div>
  <video id="videoPlayer" controls>
    <source src="" id="videoSource" type="video/mp4">
    Your browser does not support the video tag.
  </video>

  <audio id="audioPlayer" controls>
    <source src="" id="audioSource" type="audio/mpeg">
    Your browser does not support the audio tag.
  </audio>
</div>

<script>
  function playVideo(video) {
    var videoPlayer = document.getElementById("videoPlayer");
    var videoSource = document.getElementById("videoSource");
    videoSource.src = video + ".mp4";
    videoPlayer.load();
    videoPlayer.play();
  }

  function playAudio(audio) {
    var audioPlayer = document.getElementById("audioPlayer");
    var audioSource = document.getElementById("audioSource");
    audioSource.src = audio + ".mp3";
    audioPlayer.load();
    audioPlayer.play();
  }
</script>

在上面的示例代码中，我们创建了一个带有播放列表和两个音视频播放器的简单界面。点击播放列表中的链接会触发相应的JavaScript函数来加载并播放指定的视频或音频文件。

播放列表中的每一项都关联一个特定的音视频文件，通过点击链接，相关的playVideo()或playAudio()函数会被调用，根据所提供的参数来设置对应的源文件，并进行播放。

通过类似的方式，我们可以根据实际需求来扩展和自定义音视频播放列表的功能。