0
229
Vistas¿Cómo puedo cambiar la fuente de un video después de hacer clic en una etiqueta h3 específica?
Así que actualmente estoy tratando de hacer un sitio de transmisión de video, pero estoy un poco atascado.
Estoy tratando de hacer que el selector de episodios cambie la fuente del video, pero estoy un poco confundido sobre cómo puedo hacer que cambie la fuente del reproductor. También estoy tratando de hacer que el texto debajo del reproductor cambie según el video seleccionado.
<div class="container"> <div class="main-video"> <div class="video"> <video src="video link here"></video> <h3 class="ep-title">00. Prologue</h3> </div> </div> <div class="episode-list"> <div class="episode active"> <img src="image link here" alt=""> <h3 class="title">00. Prologue</h3> </div> <div class="episode"> <img src="image link here" alt=""> <h3 class="title">01. A Winter Day, A Fateful Night</h3> </div> </div> </div> </div> <script> let listVideo = document.querySelectorAll('.episode-list .episode'); let mainVideo = document.querySelector('.main-video video'); let title = document.querySelector('.main-video .title') listVideo.forEach(video =>{ video.onclick = () =>{ listVideo.forEach(episode => episode.classList.remove('active')); video.classList.add('active'); }; }); </script>Este es el aspecto actual de mi código para la página (excluyendo la barra de navegación y el código plyr). Me disculpo de antemano ya que mi pregunta puede ser un poco complicada (me faltan células cerebrales jajaja) pero cualquier ayuda es apreciada :)
2 Respuestas
Responde la pregunta0
const btn = document.getElementById('change-url'); const video = document.getElementById('video'); btn.addEventListener('click',()=>{ console.log(video) video.setAttribute('src','http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4'); }) <button id="change-url">change url</button> <br/><br/> <video id="video" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" width="300px" controls autoplay></video>0
Creo que mainVideo.setAttribute('src', YOURSOURCELINK); debe cambiar el video src. Para cambiar el texto del título puedes usar title.innerHTML = "NEWTEXT"
Un ejemplo de esto podría ser:
el argumento "índice" es el índice en la lista (tenga en cuenta que js comienza con 0 para el primer índice), por lo que para obtener el episodio uno usaría changeVideo (0), para el episodio dos changeVideo (1), etc.
var list = [{ title: "Episode 1", src: "some source link" },{ title: "Episode 2", src: "seconde source link" }]; function changeVideo(index){ let mainVideo = document.querySelector('.main-video video'); let title = document.querySelector('.main-video .title') mainVideo.setAttribute("src", list[index].src) title.innerHTML = list[index].title } entonces necesitaría un evento onclick en su selección de video, por ejemplo, agregue onclick="changeVideo(1)" en su <div class="episode">