html5实现视频列表js代码,JavaScript实现html5视频播放器列表

以下是一个简单的HTML5视频播放器列表，使用JavaScript实现：

HTML代码：

<div id="video-list">
  <ul>
    <li><a href="#" data-video-src="video1.mp4">视频1</a></li>
    <li><a href="#" data-video-src="video2.mp4">视频2</a></li>
    <li><a href="#" data-video-src="video3.mp4">视频3</a></li>
  </ul>
</div>

<video id="video-player" controls>
  <source src="" type="video/mp4">
</video>

JavaScript代码：

// 获取视频列表和视频播放器元素
var videoList = document.getElementById("video-list");
var videoPlayer = document.getElementById("video-player");

// 获取视频列表中的所有链接元素
var videoLinks = videoList.getElementsByTagName("a");

// 为每个链接元素添加单击事件
for (var i = 0; i < videoLinks.length; i++) {
  videoLinks[i].addEventListener("click", function(e) {
    e.preventDefault(); // 防止默认行为
    var videoSrc = this.getAttribute("data-video-src"); // 获取视频链接
    videoPlayer.getElementsByTagName("source")[0].setAttribute("src", videoSrc); // 设置视频源
    videoPlayer.load(); // 加载视频
    videoPlayer.play(); // 播放视频
  });
}

这段代码会为每个视频列表项的链接添加一个单击事件，当用户单击链接时，会将视频播放器的视频源设置为该链接的地址，并自动加载并播放视频。