1

Tengo un campo input con un botón para buscar videos dentro de mi web. La ruta del video es dinámica y depende del valor que se le pase al input. Si se encuentra el video, se debe de mostrar, pero si no se encuentra, debería de dar un mensaje de error.

El problema es que no se cómo gestionar la condición de si lo encuentra o no lo encuentra. Cuando no lo encuentra, en la consola aparece el error 404 (GET http://127.0.0.1:5500/video/0.mp4 404 (Not Found)) pero no se cómo capturarlo ni si se puede capturar. Otra cosa que he intentado es recuperar la duración del video para decirle a JS que si la duración es 0, que no lo muestre, pero cuando recupero la duración con video.duration, me devuelve un NAN.

¿Alguien tiene alguna sugerencia de cómo puedo comprobar si el video existe o no en mi carpeta de videos?

Este es mi código:

Muchas gracias de antemano.

const btnBuscar = document.getElementById("btn-buscar");
let inputBuscador = document.getElementById("input-Buscador");
let video = document.getElementById("video");

btnBuscar.addEventListener("click", () => {
  //Si el video existe tendría que ejecutarse este código
  video.setAttribute("src", "video/" + inputBuscador.value + ".mp4");
  video.classList.remove("d-none");
  //Si el video no existe únicamente tendría que dar un mensaje de error 
})
.d-none {
  display: none;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>test</title>
</head>

<body>
  <input type="text" id="input-Buscador" placeholder="Número de video">
  <button id="btn-buscar" class="fa-solid fa-magnifying-glass fa-lg ">Buscar</button>
  <video id="video" class="d-none" controls type="video/mp4"></video>
</body>

</html>

1 respuesta 1

3

Podes engancharle una escucha de eventos al video y mostrar el error en un div.

mensaje.innerHTML = "...";

video.addEventListener('error', function(event) {
    mensaje.innerHTML = "Error!";
    console.log(event.target.error)
  }, true);

const btnBuscar = document.getElementById("btn-buscar");
let inputBuscador = document.getElementById("input-Buscador");
let video = document.getElementById("video");
let mensaje = document.getElementById("mensaje");

btnBuscar.addEventListener("click", () => {
  //Si el video existe tendría que ejecutarse este código
  video.addEventListener('error', function(event) {
    mensaje.innerHTML = "Error!";
    console.log(event.target.error)
  }, true);
  mensaje.innerHTML = "...";
  video.setAttribute("src", "video/" + inputBuscador.value + ".mp4");
  video.classList.remove("d-none");
  //Si el video no existe únicamente tendría que dar un mensaje de error 
})
.d-none {
  display: none;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>test</title>
</head>

<body>
  <input type="text" id="input-Buscador" placeholder="Número de video">
  <button id="btn-buscar" class="fa-solid fa-magnifying-glass fa-lg ">Buscar</button>
  <video id="video" class="d-none" controls type="video/mp4"></video>
  <div id=mensaje></div>
</body>

</html>

1
  • Muchísimas gracias Alo, ¡¡¡funciona a la perfección!!!
    – Sandra
    Commented el 2 feb. a las 9:52

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.