如何构建HTML 5视频播放列表？

构建HTML5视频播放列表的方法如下：

使用HTML5的<video>标签创建视频播放器

 <source src="movie.mp4" type="video/mp4">
 <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持HTML5视频。
</video>

使用JavaScript创建播放列表

const videoList = [
  {
    title: '视频1',
    src: 'video1.mp4',
    type: 'video/mp4'
  },
  {
    title: '视频2',
    src: 'video2.mp4',
    type: 'video/mp4'
  },
  {
    title: '视频3',
    src: 'video3.mp4',
    type: 'video/mp4'
  }
];

const videoPlayer = document.querySelector('video');
const playlist = document.createElement('ol');

videoList.forEach(video => {
  const listItem = document.createElement('li');
  const link = document.createElement('a');
  link.textContent = video.title;
  link.href = '#';
  link.addEventListener('click', (e) => {
    e.preventDefault();
    videoPlayer.src = video.src;
    videoPlayer.type = video.type;
    videoPlayer.load();
    videoPlayer.play();
  });
  listItem.appendChild(link);
  playlist.appendChild(listItem);
});

document.body.appendChild(playlist);

使用CSS美化播放列表

ol {
  list-style-type: none;
  padding: 0;
}

li {
  margin-bottom: 10px;
}

a {
  text-decoration: none;
  color: #007bff;
}

a:hover {
  text-decoration: underline;
}

通过以上方法，您可以构建一个HTML5视频播放列表，用户可以通过点击播放列表中的链接切换播放不同的视频。