Estoy tratando de que los usuarios hagan clic en un botón de reproducción, vean un video de estudio de caso y hagan que el video vuelva a su estado original una vez que termine de reproducirse. El problema es que cuando se agregan varios casos de estudio en una página, getElementById() no solo es HTML no válido, sino que también reproduce el video de caso de estudio incorrecto o no se reproduce en absoluto.
Leí en línea que getElementsByName o getElementsByClassName podrían ser una alternativa, pero no puedo hacer que funcionen.
Bloque HTML de estudio de caso (esto se repite en la página)
<div class="caseStudy"> <button id="playButton"></button> <div id="casestudyPoster" class="caseStudy_poster"></div> <iframe class="caseStudy_video" src="<vimeo-url-here>" width="100%" height="100%" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" webkitallowfullscreen mozallowfullscreen allowfullscreen> </iframe> </div>JavaScript:
var poster = document.getElementById("casestudyPoster"); var button = document.getElementById("playButton"); poster.onclick = function() { fadeImage() }; button.onclick = function() { fadeImage() }; function fadeImage() { poster.style.visibility = "hidden"; button.style.visibility = "hidden"; var iframe = document.querySelector('iframe'); var player = new Vimeo.Player(iframe); player.play(); player.on('ended', function(data){ poster.style.visibility = "visible"; button.style.visibility = "visible"; }); } ¿Cómo puedo hacer que este JavaScript funcione con varios caseStudy s?
El problema es que está vinculando su funcionalidad de JavaScript a un solo elemento, mientras que desea vincular su funcionalidad de JavaScript a varios elementos.
Aquí hay un ejemplo de A) recopilar varios elementos similares B) vincular eventos únicos a sus propiedades únicas.
// Gather all your similar elements const videoElements = document.querySelectorAll( '.video-element' ); // For each element, let's do something with it. videoElements.forEach( ( vidEl ) => { // For this current element, lets create useful variables from elements found within it. const playButton = vidEl.querySelector( '.play-button' ); const dynamicText = vidEl.querySelector( '.dynamic-text' ); // For this current element's play button, let's bind a unique event to it. playButton.onclick = () => { dynamicText.innerHTML = `Video Playing!` }; } ); .video-element { border: 1px solid; margin: 1rem; } <div class="video-element"> <h2>Video 1</h2> <button class="play-button">Play</button> <span class="dynamic-text">I have my own functionality!</span> </div> <div class="video-element"> <h2>Video 2</h2> <button class="play-button">Play</button> <span class="dynamic-text">I have my own functionality!</span> </div> <div class="video-element"> <h2>Video 3</h2> <button class="play-button">Play</button> <span class="dynamic-text">I have my own functionality!</span> </div> <div class="video-element"> <h2>Video 4</h2> <button class="play-button">Play</button> <span class="dynamic-text">I have my own functionality!</span> </div>