使用html、css和javascript将视频播放列表添加到当前视频播放器

<div id="video-player-container">
  <video id="video-player" controls>
    <source src="video.mp4" type="video/mp4">
  </video>
  <ul id="playlist">
    <li><a href="video1.mp4">Video 1</a></li>
    <li><a href="video2.mp4">Video 2</a></li>
    <li><a href="video3.mp4">Video 3</a></li>
  </ul>
</div>

#video-player-container {
  width: 800px;
  height: 450px;
  border: 1px solid #ccc;
}

#playlist {
  background-color: #f5f5f5;
  padding: 10px;
  font-family: Arial, sans-serif;
}

#playlist li {
  margin-bottom: 5px;
}

#playlist li a {
  text-decoration: none;
  color: #333;
}

#playlist li a:hover {
  color: #ff0000;
}

var playlistItems = document.querySelectorAll("#playlist li a");
var videoPlayer = document.getElementById("video-player");

for (var i = 0; i < playlistItems.length; i++) {
  playlistItems[i].addEventListener("click", function(e) {
    e.preventDefault(); // 阻止默认链接行为
    var videoUrl = this.getAttribute("href");
    videoPlayer.src = videoUrl;
    videoPlayer.load();
    videoPlayer.play();
  });
}