0Pricing
HTML Academy · Lección

El elemento source para varios formatos

Proporcione formatos alternativos con el elemento source

El elemento source para varios formatos es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML Academy incluye 4 lecciones en total.

¿Por qué varios formatos?

Los distintos navegadores admiten diferentes códecs de audio y video:

  • WebM (VP9/VP8) — Chrome, Firefox y Edge (no Safari)
  • MP4 (H.264) — todos los navegadores (universal)
  • OGG — Firefox y Chrome (no Safari)
  • OPUS — Chrome, Firefox y Edge (no Safari)

El elemento <source> permite proporcionar varios formatos como alternativa.

source dentro de audio

Proporcione varios formatos de audio:

<audio controls>
  <!-- Browser picks the first format it supports: -->
  <source src="podcast.opus" type="audio/ogg; codecs=opus">
  <source src="podcast.ogg" type="audio/ogg; codecs=vorbis">
  <source src="podcast.mp3" type="audio/mpeg">
  <!-- Fallback text if none supported: -->
  <p>Download: <a href="podcast.mp3">podcast.mp3</a></p>
</audio>

source dentro de video

Proporcione varios formatos de video:

<video controls width="1280" height="720" poster="thumbnail.jpg">
  <source src="tutorial.webm" type="video/webm">
  <source src="tutorial.mp4" type="video/mp4">
  <p>Your browser doesn't support HTML5 video.
     <a href="tutorial.mp4">Download the video</a></p>
</video>

El atributo type en source

El atributo type indica al navegador el tipo MIME y el códec:

<!-- Full MIME type with codec parameter: -->
<source src="video.webm" type="video/webm; codecs=vp9,vorbis">
<source src="video.mp4" type="video/mp4; codecs=avc1.42E01E,mp4a.40.2">
<source src="audio.ogg" type="audio/ogg; codecs=vorbis">

<!-- Simplified (browser may need to probe): -->
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">

Cómo funciona la selección de source

El navegador evalúa los elementos source en orden:

  1. Lee el type del primer source
  2. Si puede reproducir ese tipo, lo descarga y lo utiliza
  3. Si no puede, pasa al siguiente source
  4. Si ningún source funciona, muestra el contenido alternativo

Coloque primero el formato preferido (por ejemplo, WebM para mejorar el rendimiento en Chrome y Firefox).

Atributo media en source

El atributo media permite ofrecer distintos formatos para diferentes ventanas gráficas:

<video controls>
  <!-- Mobile: smaller file -->
  <source
    src="video-480.mp4"
    type="video/mp4"
    media="(max-width: 768px)"
  >
  <!-- Desktop: full quality -->
  <source
    src="video-1080.mp4"
    type="video/mp4"
  >
</video>

Orden de formatos recomendado

Orden óptimo de los elementos source para obtener la máxima compatibilidad y rendimiento:

<video controls>
  <!-- AV1 in WebM: best compression, modern browsers -->
  <source src="video.av1.mp4" type="video/mp4; codecs=av01">

  <!-- VP9 in WebM: Chrome/Firefox/Edge -->
  <source src="video.webm" type="video/webm">

  <!-- H.264 in MP4: universal fallback -->
  <source src="video.mp4" type="video/mp4">
</video>

Recomendaciones de formatos de audio

Recomendaciones de códecs de audio:

  • OPUS en WebM — mejor relación entre calidad y tamaño; Chrome, Firefox y Edge
  • AAC en MP4 — universal; Safari, Chrome, Firefox y Edge
  • MP3 — mayor compatibilidad; úselo como última alternativa

Video adaptable con srcset

Para los videos, use media en source para adaptar el uso del ancho de banda:

<video controls poster="thumbnail.jpg">
  <source
    src="video-720.webm"
    type="video/webm"
    media="(min-width: 1024px)"
  >
  <source
    src="video-360.webm"
    type="video/webm"
  >
  <source src="video-720.mp4" type="video/mp4" media="(min-width: 1024px)">
  <source src="video-360.mp4" type="video/mp4">
</video>

Comprobación de canPlayType

Compruebe la compatibilidad del navegador con códecs mediante JavaScript:

const video = document.createElement('video');

console.log(video.canPlayType('video/webm; codecs=vp9'));
// '' = no, 'maybe' = possibly, 'probably' = likely yes

console.log(video.canPlayType('video/mp4; codecs=avc1.42E01E'));
// 'probably' on most modern browsers

Contenido alternativo

Incluya siempre contenido alternativo dentro de audio/video:

<video controls width="800" height="450">
  <source src="demo.webm" type="video/webm">
  <source src="demo.mp4" type="video/mp4">

  <!-- Fallback for browsers without video support: -->
  <p>
    Your browser does not support HTML5 video.
    <a href="demo.mp4">Download the video</a> instead.
  </p>
</video>

Comprobación rápida

¿En qué orden debe enumerar los elementos source?

Resumen: elemento source

Aspectos esenciales del elemento source:

  • <source src type> dentro de audio/video proporciona alternativas de formato
  • El navegador selecciona el primer source compatible
  • Coloque primero el formato más moderno; MP4/AAC como alternativa universal
  • Incluya texto o un enlace alternativo dentro de audio/video después de todos los source
  • Use media en source para seleccionar videos según la ventana gráfica

Preguntas frecuentes

¿La lección «El elemento source para varios formatos» es gratis?

Sí — el texto completo de «El elemento source para varios formatos» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML Academy, actualiza a CoddyKit PRO. El curso de HTML Academy incluye 4 lecciones en total.

¿Qué aprenderé en «El elemento source para varios formatos»?

Proporcione formatos alternativos con el elemento source Practicas HTML Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar HTML Academy?

No se requiere experiencia previa. HTML Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.

¿Cuánto tiempo toma la lección «El elemento source para varios formatos»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de HTML Academy?

Sí. Cada lección de HTML Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. El elemento audio: src, controls, loop y autoplay
  2. El elemento video y la relación de aspecto
  3. El elemento source para varios formatos
  4. Subtítulos con track y WebVTT
← Volver a HTML Academy