1

Tengo este documento HTML:

<!DOCTYPE html>
<html lang="sp">
<head>
    <meta charset="UTF-8">
    <title>Reproductor de Video</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <div class="container">
        <video src = "lista/jake.mp4"  autoplay></video>
        <i class="fa fa-play med_icon icon_white pointer"></i>

        <div class="pull-right">
            <i class="fa fa-volume-up"></i>
            <i class="fa fa-expand"></i>
            <i class="fa fa-arrows-alt"></i>
        </div>
    </div>
</body>
</html>


Solo me funciona de esa forma, haciendo referencia directa a la dirección del vídeo.

Pero ésta puede variar y, por ello, lo estoy guardando en una variable de javascript. Pero no sé cómo hacer referencia al dato guardado de esa variable en HTML.

2
  • Hola, bienvenido a la comunidad. Te invito a hacer el recorrido y leer ¿cómo preguntar?. Además, para poder reproducir tu problema y encontrar una solución fácilmente nos sería de gran ayuda un ejemplo mínimo, completo y verificable. En tu ejemplo no veo por ningún lado una variable que contenga la URL de un vídeo diferente. ¿Podrías modificar tu pregunta y agregar la variable que contiene la URL que necesitas cambiar en el vídeo? Gracias. Commented el 21 jul. 2021 a las 5:55
  • ¿Lo que quieres cambiar o hacer referencia es el src de la etiqueta video? Sí es así, tiene que ocurrir algo para que ésta cambie ¿no? Pues solo tienes que escuchar ese evento y cuando ocurra, editar el atributo. Esto es tanto sí es el src del video como sí es la clase de un elemento.
    – S. Wasta
    Commented el 21 jul. 2021 a las 7:01

1 respuesta 1

3

El problema que tienes podría resolverse modificando, a través del DOM, el atributo src de la etiqueta video.

A continuación te muestro un ejemplo de cómo hacerlo:

let nuevo_video = "https://ojgarciab.github.io/470162-stackoverflow-es/Mountains%20-%2061818.mp4";

/* Configuramos para que el botón haga el cambio de vídeo */
document.getElementById("boton").addEventListener("click", () => {
  /* Asignamos la nueva URL al atributo "src" del vídeo */
  document.getElementById("video").src = nuevo_video;
});
<button id="boton">Cambiar vídeo</button><br />
<video
  width="320" height="180"
  src="https://ojgarciab.github.io/470162-stackoverflow-es/Woman%20-%2063241.mp4"
  id="video"
  muted
  autoplay
  controls
></video>

Es importante que tengas en cuenta varias cosas:

  • Necesitas un identificador o algo con lo que localizar la etiqueta que deseas modificar. En el ejemplo he usado dos identificadores, uno para el botón y otro para el vídeo.
  • La reproducción automática de vídeos podría no funcionar hasta que se haga una primera interacción con la página. Una manera de evitarlo es usar la propiedad muted antes de autoplay.

Además, deberías evitar usar espacios en blanco entre el nombre de las propiedades, el igual y su valor.

En tu caso estás usando:

<video src = "lista/jake.mp4"  autoplay></video>

Pero deberías usar:

<video src="lista/jake.mp4" autoplay></video>

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.