Reproducción y Control de Vídeo en HTML5

Por supuesto, te proporcionaré una clase detallada sobre la reproducción y control de vídeo, cubriendo los atributos y métodos del elemento <video>, el manejo de eventos asociados a este elemento, y cómo utilizar <track> para agregar subtítulos y pistas de audio. Comencemos:

###Atributos y Métodos del Elemento <video>

El elemento HTML <video> es utilizado para incorporar contenido de vídeo en documentos HTML. Este elemento soporta varios atributos y métodos que permiten controlar la reproducción de vídeo de manera programática mediante JavaScript.

Atributos Comunes:

• src: Especifica la dirección URL del vídeo a reproducir.
• controls: Muestra los controles de reproducción predeterminados del navegador (play, pause, volumen, etc.).
• autoplay: Comienza a reproducir el vídeo tan pronto como esté disponible.
• loop: Reproduce el vídeo en bucle una vez que llega a su fin.
• muted: Inicia el vídeo sin sonido.
• volume: Controla el volumen del vídeo (rango de 0 a 1).

Métodos Importantes:

• play(): Comienza la reproducción del vídeo.
• pause(): Pausa el vídeo.
• load(): Recarga el vídeo (útil si cambias el atributo src).

Ejemplo Básico:

HTML:

<video id="miVideo" width="320" height="240" controls>
  <source src="ruta/a/tu/video.mp4" type="video/mp4" />
  Tu navegador no soporta el elemento <video>.</video>
</video>

JavaScript:

var miVideo = document.getElementById("miVideo");

// Reproducir el vídeo
function reproducirVideo() {
  miVideo.play();
}

// Pausar el vídeo
function pausarVideo() {
  miVideo.pause();
}

// Cambiar el volumen
function cambiarVolumen(valor) {
  miVideo.volume = valor; // Valor entre 0 y 1
}

Eventos del Elemento <video>

Los eventos te permiten ejecutar código en respuesta a ciertas acciones en el vídeo, como comenzar la reproducción, pausarla o que el vídeo termine.

Eventos Comunes:

• play: Se dispara cuando el vídeo comienza a reproducirse.
• pause: Se dispara cuando el vídeo se pausa.
• ended: Se dispara cuando el vídeo llega a su fin.

Ejemplo de Manejo de Eventos:

var miVideo = document.getElementById("miVideo");

miVideo.addEventListener("play", function () {
  console.log("El vídeo ha empezado a reproducirse");
});

miVideo.addEventListener("pause", function () {
  console.log("El vídeo ha sido pausado");
});

miVideo.addEventListener("ended", function () {
  console.log("El vídeo ha terminado");
});

Subtítulos y Pistas de Audio con <track>

El elemento <track> se utiliza para especificar pistas de texto (como subtítulos o descripciones) para el elemento <video>.

Atributos Importantes:

• kind: Define el tipo de pista (subtitles, captions, descriptions, chapters, or metadata).
• src: La dirección URL de la pista.
• srclang: El idioma de la pista (por ejemplo, en para inglés).
• label: El título de la pista, mostrado al usuario.

Ejemplo con Subtítulos:

<video controls>
  <source src="ruta/a/tu/video.mp4" type="video/mp4" />
  <track
    src="subtitulos_es.vtt"
    kind="subtitles"
    srclang="es"
    label="Español"
  />
  <track
    src="subtitulos_en.vtt"
    kind="subtitles"
    srclang="en"
    label="English"
  />
</video>

En este ejemplo, hemos añadido dos pistas de subtítulos al vídeo, una en español y otra en inglés. Los archivos .vtt contienen los subtítulos y sus tiempos de aparición.