Atributos de elementos multimedia

5.1 Atributos adicionales

Los elementos multimedia de HTML5, como <audio> y <video>, proporcionan muchos atributos para controlar la reproducción de contenido multimedia. Entender estos atributos permite crear páginas web más interactivas y amigables que se pueden adaptar a las diferentes necesidades de los usuarios. Ahora veremos en detalle los atributos adicionales disponibles para los elementos <audio> y <video>.

Atributo crossorigin

El atributo crossorigin indica cómo el navegador debe manejar las solicitudes a archivos multimedia que se encuentran en otros dominios. Este atributo puede tomar dos valores:

• anonymous: la solicitud se realiza sin incluir credenciales (cookies, encabezados de autorización, etc.)
• use-credentials: la solicitud se realiza incluyendo credenciales

Ejemplo:

    
      <audio src="https://example.com/audiofile.mp3" controls crossorigin="anonymous"></audio>
      <video src="https://example.com/videofile.mp4" controls crossorigin="use-credentials" width="800" height="450"></video>
    
  

Atributos de fuentes <source>

Las etiquetas <source> se utilizan dentro de los elementos <audio> y <video> para especificar múltiples fuentes de contenido multimedia. Esto ayuda a asegurar la compatibilidad entre navegadores, ya que diferentes navegadores pueden soportar diferentes formatos.

Ejemplo:

    
      <video controls width="600">
        <source src="videofile.mp4" type="video/mp4">
        <source src="videofile.webm" type="video/webm">
        <source src="videofile.ogv" type="video/ogg">
        Tu navegador no soporta el elemento de video.
      </video>
    
  

Atributos y propiedades para subtítulos y pistas de texto

HTML5 proporciona la posibilidad de añadir subtítulos, pistas de texto y descripciones mediante la etiqueta <track>. Este elemento soporta varios tipos de pistas de texto, como subtítulos, descripciones y capítulos.

Ejemplo:

    
      <video controls width="600">
        <source src="videofile.mp4" type="video/mp4">
        <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="Inglés">
        <track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Español">
        Tu navegador no soporta el elemento de video.
      </video>
    
  

5.2 Control de elementos multimedia con JavaScript

Los elementos <audio> y <video> proporcionan un API para gestionar la reproducción con JavaScript. Esto permite crear controles personalizados e implementar escenarios complejos de reproducción.

Ejemplo:

    
      <video id="myVideo" src="videofile.mp4" controls></video>
      <button onclick="playVideo()">Reproducir</button>
      <button onclick="pauseVideo()">Pausa</button>
      <button onclick="stopVideo()">Detener</button>
    
  

    
      const video = document.getElementById("myVideo");

      function playVideo() {
        video.play();
      }

      function pauseVideo() {
        video.pause();
      }

      function stopVideo() {
        video.pause();
        video.currentTime = 0;
      }
    
  

En este ejemplo, los botones permiten reproducir, pausar y detener el video usando JavaScript.

5.3 Eventos de elementos multimedia

Los elementos <audio> y <video> soportan una variedad de eventos que permiten monitorear y reaccionar a cambios en el estado de reproducción.

Eventos principales:

• play: ocurre cuando comienza la reproducción
• pause: ocurre cuando la reproducción se pausa
• ended: ocurre cuando la reproducción termina
• timeupdate: ocurre periódicamente a medida que cambia el tiempo actual de reproducción

Ejemplo de uso de eventos:

    
      <video id="myVideo" src="videofile.mp4" controls></video>
    
  

    
      const video = document.getElementById("myVideo");

      video.addEventListener('play', function() {
        console.log('El video comenzó a reproducirse');
      });

      video.addEventListener('pause', function() {
        console.log('El video está en pausa');
      });

      video.addEventListener('ended', function() {
        console.log('El video terminó');
      });

      video.addEventListener('timeupdate', function() {
        console.log('Tiempo actual: ' + video.currentTime);
      });
    
  

Este código demuestra cómo se pueden monitorear los eventos principales de un elemento multimedia.

1

Опрос

Multimedia en HTML,  6 уровень,  5 лекция

недоступен

Multimedia en HTML

Multimedia en HTML

Открыть