Estoy trabajando en una página web que irá y mostrará un botón que se vinculará a otra página. Encontré algo aquí que tenía algo similar pero no funciona. Está ocultando el botón como debería, pero cuando termina el video, el botón no aparece. Aquí está el código:
<html><head><style> body { background-color: F4F0EC; /*background-color: DCDCDC;*/ /*background-color: lightgrey;*/ } img { display: block; margin-left: auto; margin-right: auto; } div.heading { width: 40%; text-align: center; margin-left: auto; margin-right: auto; font-family: Verdana; font-size: 18px; } div.wrapper { width: 40%; height: auto; margin-left: auto; margin-right: auto; } div.image_background { display: none; } div.copyright { width: 99%; margin-left: auto; margin-right: auto; font-family: Verdana; font-size: 12px; text-align: center; color: E21D38; margin: 0; position: absolute; top: 95%; -ms-transform: translateY(-2%); transform: translateY(-2%); } </style> </head> <body><br><br> <img style="width: 50%;" src="Banner.png" alt="Banner"><br><br><br> <div class="heading">Introduction</div><br><br> <div class="wrapper"><video width="100%" controls preload="metadata" controlsList="nodownload" id="video_background"> <source src="/test-video.mp4" type="video/mp4">Your browser does not support the video tag.</video><br></div><br><br> <div class="image_background"><img id="image_background" src="/next-button.png" alt="Next Button"></div><br><br><br><br> <div class="copyright">© 2021 Takachsin Lodge. All Rights Reserved.</div> <script type="text/javascript"> var video = document.getElementById('video_background'); var wrapper = document.getElementById('wrapper'); var image = document.getElementById('image_background'); video.addEventListener('ended', function() { //video.style.display = 'none'; image.style.display = 'block'; }, false); </script> </body> </html>Cualquier ayuda en esto sería muy apreciada. Lo que intento hacer es crear un sitio web de capacitación en el que los usuarios vean videos de capacitación y pasen al siguiente segmento de la capacitación. No soy bueno con JavaScript y por eso necesito ayuda. No sé si se puede hacer o no, pero sería bueno si también pudiera eliminar la capacidad de avance rápido en estos videos.
Hay una serie de cuestiones aquí.
Primero, su secuencia de comandos se ejecuta antes que su HTML, por lo que debe mover la secuencia de comandos hacia abajo para que el DOM se muestre antes de que se ejecute la secuencia de comandos.
Segundo, var video = document.getElementById('video_background'); se refiere al elemento HTML de source , no al elemento HTML de video , por lo que debemos cambiarlo a var video = document.getElementById('video');
En tercer lugar, su CSS está ocultando el botón, no la imagen, por lo que cuando su javascript está cambiando la imagen para mostrar: en línea, el botón principal aún está oculto. Entonces, debemos establecer una identificación en ese elemento principal <div class="button" id="button"><img src="" alt="Next Button" id="image_background"></div> y hacer el correspondiente cambios en nuestra var image = document.getElementById('button');
El siguiente código funciona:
<html><head><style> body { background-color: F4F0EC; /*background-color: DCDCDC;*/ /*background-color: lightgrey;*/ } img { display: block; margin-left: auto; margin-right: auto; } div.heading { width: 40%; text-align: center; margin-left: auto; margin-right: auto; font-family: Verdana; font-size: 18px; } div.wrapper { width: 40%; height: auto; margin-left: auto; margin-right: auto; } div.button { display:none; } div.copyright { width: 99%; margin-left: auto; margin-right: auto; font-family: Verdana; font-size: 12px; text-align: center; color: E21D38; margin: 0; position: absolute; top: 95%; -ms-transform: translateY(-2%); transform: translateY(-2%); } </style> </head> <body><br><br> <img style="width: 50%;" src="Banner.png" alt="Banner"><br><br><br> <div class="heading">Introduction</div><br><br> <div class="wrapper"><video width="100%" controls preload="metadata" controlsList="nodownload" id="video"> <source src="https://samplelib.com/lib/preview/mp4/sample-5s.mp4" type="video/mp4" id="video_background">Your browser does not support the video tag.</video><br></div><br><br> <div class="button" id="button"><img src="https://dabuttonfactory.com/button.png?t=Next&f=Open+Sans-Bold&ts=30&tc=fff&tshs=1&tshc=666&hp=45&vp=20&w=200&h=50&c=13&bgt=gradient&bgc=e21d38&ebgc=900&bs=1&bc=000&shs=1&shc=999&sho=se" alt="Next Button" id="image_background"></div><br><br><br><br> <div class="copyright">© 2021 All Rights Reserved.</div> </body> <script type="text/javascript"> var video = document.getElementById('video'); var image = document.getElementById('button'); video.addEventListener('ended', function() { video.style.display = 'none'; image.style.display = 'inline'; }, false); </script> </html>De un vistazo, sospecho que esto no funciona porque su secuencia de comandos se ejecuta antes de que se represente su html, por lo que sus llamadas getElementById no encuentran lo que están buscando.
.button también es display: none , por lo que la imagen no será visible independientemente de su propio estilo de visualización, porque está dentro de div.buttonEn lugar de aplicar varias reglas de estilo a varios elementos, cambie una clase en el contenedor y haga que todas sus otras reglas se basen en eso en su css estático:
const states = ['initial', 'playing', 'finished']; let stateIndex = 0; const container = document.querySelector('.video-container'); const video = document.querySelector('.video'); video.addEventListener('click', () => { container.classList.remove(states[stateIndex]); stateIndex = (stateIndex + 1) % states.length; container.classList.add(states[stateIndex]); console.log(states[stateIndex]); }); .video-container .video { width: 300px; background: bisque; display: flex; align-items: center; justify-content: center; margin: 1rem auto; } .message { display: none; } .initial .message.initial { display: block; } .playing .message.playing { display: block; } .finished .message.finished { display: block; } <div class="video-container initial"> <div class="video">Pretend I'm a video. Click me to cycle through states.</div> <div class="message initial">I'm visible when state is 'initial'.</div> <div class="message playing">I'm visible when the video is playing.</div> <div class="message finished">I'm visible when the video is finished.</div> </div>