0

I currently have this servcable playlist set up, but it only loops each file and doesn't advance the list to the "next" video.

What changes need to be made, for the playback to advance to the next listentry once a file has finished playing ?

It would obviously be interesting to be able to return to the first file after finishing the playlist, but it is not required.

Basic "move to next" title is all that is required.

Demo: https://codepen.io/ryedai1/full/PoaaWVg

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Videoplaylist Youtube Style (loop)</title>
  

</head>
<body>
<!-- partial:index.partial.html -->
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Video Playlist</title>
 <style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600&display=swap');
* {
  font-family: 'Popins', sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  border: none;
  text-decoration: none;
  text-transform: capitalize;
}
body {
    background-color: white;
    padding: 20px;
}
.container {
  max-width: 1200px;
  margin: 0px auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 20px;
}
.container .main-video-container {
  flex: 1 1 700px;
  border-radius: 5px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, .1);
  background-color: wheat;
  padding: 15px;
}
.container .main-video-container .main-video {
  margin-bottom: 7px;
  border-radius: 5px;
  width: 100%;
}
.container .main-video-container .main-vid-title {
  font-size: 20px;
  color: #444;
}
.container .video-list-container {
  flex: 1 1 350px;
  height: 485px;
  overflow-y: scroll;
  border-radius: 5px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, .1);
  background-color: wheat;
  padding: 15px;
}
.container .video-list-container::-webkit-scrollbar {
  width: 10px;
}
.container .video-list-container::-webkit-scrollbar-track {
  background-color: wheat;
  border-radius: 5px;
}
.container .video-list-container::-webkit-scrollbar-thumb {
  background-color: #444;
  border-radius: 5px;
}
.container .video-list-container .list {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 10px;
  background-color: whitesmoke;
  cursor: pointer;
  border-radius: 5px;
  margin-bottom: 10px;
}
.container .video-list-container .list:last-child {
  margin-bottom: 0;
}
.container .video-list-container .list.active {
  background-color: #444;
}
.container .video-list-container .list.active .list-title {
  color: wheat;
}
.container .video-list-container .list .list-video {
  width: 100px;
  border-radius: 5px;
}
.container .video-list-container .list .list-title {
  font-size: 17px;
  color: #444;
}
@media (max-width:1200px){
  .container{
    margin: 0;
  }
}
@media (max-width:450px){
  .container .main-video-container .main-vid-title{
    font-size: 15px;
    text-align: center;
  }
  .container .video-list-container .list{
    flex-flow: column;
    gap: 10px;
  }
  .container .video-list-container .list .list-video{
    width: 100%;
  }
  .container .video-list-container .list .list-title{
    font-size: 15px;
    text-align: center;
  }
}

</style>
</head>
<body>
<!-- partial:index.partial.html -->
<!DOCTYPE html>
<html lang="en pt-br">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!--- Custom CSS file link --->
  <!--<link rel="stylesheet" href="css/style.css">-->
</head>
<body>
<div class="container">

  <div class="main-video-container">
    <video src="https://video" loop controls class="main-video"></video>
    <h3 class="main-vid-title">video</h3>
  </div>

  <div class="video-list-container">
    <div class="list active">
        <video src="https://video" class="list-video"></video>
        <h3 class="list-title">video</h3>
    </div>
    <div class="list">
        <video src="https://video" class="list-video"></video>
        <h3 class="list-title">video2</h3>
    </div>
    <div class="list">
        <video src="https://video" class="list-video"></video>
        <h3 class="list-title">video3</h3>
    </div>


    </div>
  </div>
</div>
<script>
let videoList = document.querySelectorAll('.video-list-container .list');
videoList.forEach(vid =>{
   vid.onclick = () =>{
      videoList.forEach(remove =>{remove.classList.remove('active')});
      vid.classList.add('active');
      let src = vid.querySelector('.list-video').src;
      let title = vid.querySelector('.list-title').innerHTML;
      document.querySelector('.main-video-container .main-video').src = src;
      document.querySelector('.main-video-container .main-video').play();
      document.querySelector('.main-video-container .main-vid-title').innerHTML = title;
   };
});
</script>
</body>
</html>
<!-- partial -->
 <!--<script  src="./script.js"></script>-->
</body>
</html>
<!--https://codepen.io/Oral_Seventhplanet/pen/RwgKMBm -->
<!-- partial -->
  
</body>
</html>
repeekyraid cero
  • 65
  • 5

0 Answers0