Estoy creando un sitio web con vue.js donde un usuario puede seleccionar la hora en que aparece algo en un video. El problema es que no puedo seleccionar la hora del video.
Por ejemplo: el usuario quiere que aparezca una imagen a las 5:00 en su video. ¿Cómo puedo permitir que el usuario seleccione la hora y que la imagen se muestre en el momento adecuado?
Aquí está cómo hacerlo con javascript sin procesar. Solo adóptalo a tu código.
<!DOCTYPE html> <html> <body> <video width="200" controls> <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> Your browser does not support HTML video. </video> <br> <big><span id="popup">Here will be popup</span></big> <br> <label for="time_to_popup">do popup after (secs): </label> <input type="text" id="time_to_popup" value="2" name="time_to_popup"> <p> Video courtesy of <a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>. </p> <script> var intervalID = null; // get video object const video = document.querySelector('video'); // if play is started set interval to check play time // and do popup if playing time bigger than popup trigger time video.addEventListener('play', (event) => { intervalID = setInterval(function() { if (video.currentTime > parseInt(document.getElementById("time_to_popup").value)) { document.getElementById("popup").textContent = "BOOOOOOM !!!!!"; } }, 1000); }); // remove interval and revert popup message to normal text // if video is paused video.addEventListener('pause', (event) => { document.getElementById("popup").textContent = "Here will be popup"; clearInterval(intervalID); }); </script> </body> </html>En breve:
El objeto de video html5 tiene el atributo currentTime ( video.currentTime ) que se puede usar para obtener la hora actual. También puede usar el atributo paused ( video.paused ) para verificar si se está reproduciendo un video.