首页html 实现video循环播放播放器列表中的视频

html 实现video循环播放播放器列表中的视频

时间: 2024-04-30 10:17:45 浏览: 219

可以通过以下的 HTML 代码实现一个循环播放的视频播放器，同时还可以在播放器列表中加入多个视频： ```html <!DOCTYPE html> <html> <head> <title>循环播放视频列表</title> </head> <body>  <video id="myVideo" width="640" height="360" loop> <source src="video1.mp4" type="video/mp4"> <source src="video1.webm" type="video/webm"> <source src="video1.ogg" type="video/ogg"> Your browser does not support the video tag. </video>  <ul> <li><a href="#" onclick="playVideo('video1.mp4')">视频1</a></li> <li><a href="#" onclick="playVideo('video2.mp4')">视频2</a></li> <li><a href="#" onclick="playVideo('video3.mp4')">视频3</a></li> </ul> <script> // 播放指定的视频 function playVideo(src) { var video = document.getElementById('myVideo'); video.src = src; video.play(); } </script> </body> </html> ``` 使用 `loop` 属性可以让视频自动循环播放。在播放列表中点击视频标题时，会调用 JavaScript 函数 `playVideo(src)`，通过修改视频的 `src` 属性来切换视频，并调用 `play()` 方法开始播放。

阅读全文