Estoy tratando de construir un reproductor de video que funcione en todas partes.
<div class="container"> <div class="main-video"> <div class="video"> <video src="gal/video1.mp4" controls muted autoplay></video> <h3 class="title">01. video 1</h3> </div> </div> <div class="video-list"> <div class="vid active"> <video src="gal/video1.mp4" muted></video> <h3 class="title">01. video 1</h3> </div> <div class="vid"> <video src="gal/video2.mp4" muted></video> <h3 class="title">02. Title for video 2</h3> </div> </div> </div>Pero ahora también quiero algún tipo de lista de reproducción/menú junto con el reproductor de video, desde el cual puedo seleccionar otros videos. Esos deberían abrirse dentro de mi reproductor de inmediato. Entonces tendré que "cambiar dinámicamente la fuente del video". Pero el problema es que los videos no cambian al hacer clic, simplemente se queda en blanco y tengo que volver a cargar la página. Este es el código js
<script> let listVideo = document.querySelectorAll('.video-list .vid'); let mainVideo = document.querySelector('.main-video video') let title = document.querySelector('.main-video .title') listVideo.forEach(video =>{ video.onclick = () =>{ listVideo.forEach(vid => vid.classList.remove('active')); video.classList.add('active'); if(video.classList.contains('active')){ let src = video.children[0].getAttribute('src'); mainVideo.src = src; let text = video.children[1].innerHTML; title.innerHTML = text; }; }; }); </script>