Tecnología Electrónica

Cómo incrustar vídeo .M4V en página HTML (etiqueta video + fallback)

.M4V = contenedor MP4 de Apple (opcional DRM FairPlay). Sin DRM, reproduce en navegadores con soporte MP4 (H.264/H.265). Para incrustar:

HTML5 moderno (recomendado)

<video width="640" height="360" controls preload="metadata">
  <source src="video.m4v" type="video/mp4">
  <!-- Fallback opcional: WebM para Firefox antiguo -->
  <source src="video.webm" type="video/webm">
  <p>Tu navegador no soporta vídeo HTML5. <a href="video.m4v">Descargar</a></p>
</video>
  • controls: muestra botones play, barra, volumen, pantalla completa.
  • preload="metadata": carga solo metadatos (ahorra ancho de banda).
  • width/height: evita reflow de layout al cargar.
  • Rutas: relativas (videos/video.m4v) o absolutas (https://cdn.tuweb.com/video.m4v).

Si el .m4V TIENE DRM (FairPlay)

No se puede reproducir en <video> estándar. Requiere FairPlay Streaming (FPS) + licencia + reproductor certificado (ej.: hls.js con módulo FairPlay, THEOplayer, Bitmovin). Solo en Safari/Edge (Windows) / apps nativas iOS/tvOS/macOS. No en Chrome/Firefox/Android.

Antiguo: QuickTime Embed (obsoleto, no uses)

<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="320" height="256">
  <param name="src" value="video.m4v">
  <param name="controller" value="true">
  <embed src="video.m4v" width="320" height="256" controller="true" pluginspage="https://www.apple.com/quicktime/download/">
</embed></object>

Solo funcionaba con plugin QuickTime (muerto desde 2018).

Buenas prácticas 2024

  • Codifica en H.264 (AVC) High Profile, Level 4.0/4.1 + AAC-LC audio. Compatibilidad 99%+.
  • Ofrece WebM (VP9/AV1 + Opus) como <source> secundario (mejor compresión).
  • Usa HLS (m3u8) + DASH (mpd) para streaming adaptativo (hls.js, dash.js, Shaka Player).
  • Poster: <video poster="portada.jpg">.
  • Accesibilidad: <track kind="captions" src="subs.vtt" srclang="es" label="Español">.

>

<

Vida inteligente