Bootstrap 5 视频播放器网站：播放列表和本地视频 - 代码示例 - 常规

使用 Bootstrap 5 创建视频播放网站：播放列表和本地视频

本文将演示如何使用 Bootstrap 5 构建一个简单的视频播放网站，该网站包含一个播放列表，并支持播放本地视频文件。

代码示例

以下是一个完整的代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Video Player</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-md-4">
        <h3>Playlist</h3>
        <ul class="list-group">
          <li class="list-group-item" onclick="playVideo('video1.mp4')">Video 1</li>
          <li class="list-group-item" onclick="playVideo('video2.mp4')">Video 2</li>
          <li class="list-group-item" onclick="playVideo('video3.mp4')">Video 3</li>
        </ul>
      </div>
      <div class="col-md-8">
        <h3>Video Player</h3>
        <video id="videoPlayer" controls>
          <source id="videoSource" src="" type="video/mp4">
        </video>
      </div>
    </div>
  </div>

  <script>
    function playVideo(videoUrl) {
      var videoSource = document.getElementById('videoSource');
      videoSource.src = videoUrl;
      var videoPlayer = document.getElementById('videoPlayer');
      videoPlayer.load();
      videoPlayer.play();
    }
  </script>
</body>
</html>

代码解释

HTML 结构
- 使用 Bootstrap 的 container 和 row 类来布局页面，并将播放列表和视频播放器分别放置在两个 col-md-4 和 col-md-8 的列中。
- 在播放列表中使用 list-group 类创建列表项，每个列表项包含一个视频文件的名称和一个 onclick 事件，用于调用 playVideo 函数。
- 在视频播放器区域使用 video 标签和 source 标签来加载视频文件。
JavaScript 函数
- playVideo(videoUrl) 函数接收一个视频文件路径作为参数，然后将该路径设置到 videoSource 元素的 src 属性中。
- 使用 videoPlayer.load() 加载视频文件，并使用 videoPlayer.play() 开始播放。

注意事项

请确保将 video1.mp4，video2.mp4 和 video3.mp4 这些视频文件放在与 HTML 文件相同的目录下，并替换播放列表中的视频文件名称为您自己的视频文件名称。
您也可以根据需要修改代码，例如添加更多功能，例如暂停、音量控制等。