Compartir a través de

Este artículo proviene de un motor de traducción automática.

Creación de aplicaciones HTML5

Audio y vídeo práctico en cualquier explorador con HTML5

John Dyer

Descargar el código de ejemplo

Cuando se introdujeron las etiquetas HTML5 de audio y vídeo, incompatibilidades de códec y explorador hizo difícil de utilizar y realista para implementar en los sitios Web a gran escala.Las etiquetas eran grandes para empresas escribiendo código experimental o desarrollo de medios de comunicación de navegadores, pero los medios de comunicación de HTML5 API eran demasiado poco fiable para uso general.

Hoy, las cosas son diferentes.Bibliotecas de JavaScript y navegadores han madurado hasta el punto donde se puede — y debe — utilice medios de HTML5 como el valor predeterminado para cualquier proyecto que mostrará el contenido de audio y vídeo.Incluso retroadaptación Flash existente y Silverlight contenido de vídeo para la reproducción de HTML5 se ha vuelto bastante simple.En este artículo, voy explorar las ventajas de utilizar HTML5 para la reproducción de medios de comunicación, mostrar algún código de ejemplo, abordar algunas cuestiones importantes que los desarrolladores enfrentan y presentan soluciones a esos problemas.

Beneficios de los medios de HTML5

La ventaja de utilizar HTML5 para medios de comunicación están que usted puede aprovechar sus conocimientos HTML, CSS y JavaScript en lugar de aprendizaje de Flash o Silverlight.Si puede crear botones en HTML y controlar con JavaScript, ya sabe todo lo que necesita para desarrollar medios de HTML5.Medios de HTML5 tiene compatibilidad integrada con los títulos y subtítulos con el nuevo elemento de pista y propuestas para funciones adicionales: acceso de byte para la manipulación de vídeo como directo — ya están siendo considerados.

Por otra parte, medios de comunicación que utiliza audio y vídeo de HTML5 funciona mejor que juega a través de plug-ins como Flash o Silverlight, resultando en la vida de batería más larga y más suave reproducción de medios de comunicación.Además, los dispositivos móviles que ejecutan Windows Phone 7.5, Apple iOS y Android (como el explorador de estilo Metro de Windows 8) admite reproducción de medios sólo a través de HTML5 de audio y vídeo.Algunos dispositivos Android incluyen Flash, pero Adobe recientemente ha suspendido sus esfuerzos Flash móviles, lo que significa que HTML5 será la única forma de reproducir contenido multimedia en dispositivos móviles en el futuro.

Controles y simple reproducción de HTML5

En los días de usar Flash o Silverlight para reproducción de vídeo, la marca más simple posible para mostrar un video (video.mp4 en este caso) habría visto algo como esto:

<object width="640" height="360" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
  <param name="src" value="player.swf?file=video.mp4">
  <embed src="player.swf?file=video.mp4" width="640"
    height="360"></embed>
</object>

Comparar los objetos anidados, param y embed etiquetas con esta etiqueta de vídeo HTML5 utilizado para reproducir el mismo vídeo codificado en h.264:

<video src="video.mp4" controls></video>

Es mucho más sencillo: simplemente HTML que necesita poca explicación. Cuando el navegador ha descargado suficiente de un vídeo para determinar su nativa alto y ancho, redimensiona el video en consecuencia. Pero, al igual que con etiquetas img, siempre es mejor especificar los atributos de altura y anchura para que la página no necesita a reflujo. También puede utilizar el atributo style para especificar los valores de width y height px o % (podrá utilizar tanto en los ejemplos siguientes).

Un atributo que se ha agregado es controles. Esto indica al explorador para mostrar su propia barra de control de reproducción integrada, que generalmente incluye un control reproducir/pausa, un indicador de progreso y controles de volumen. Controles es un atributo booleano, lo que significa no necesita tener un valor asignado. Para una sintaxis más XHTML como se podrían escribir controles = "controles", pero el explorador siempre considera controles ser falso si no está presente y true si está presente o un valor asignado.

HTML5 Medios atributos y etiquetas de origen del niño

Los elementos de audio y vídeo introducen varios nuevos atributos que determinan cómo el navegador presentará el contenido multimedia para el usuario final.

  • src especifica un archivo multimedia única para la reproducción (de múltiples fuentes con diferentes codecs, véase la discusión más abajo).
  • cartel es una dirección URL a una imagen que se mostrará antes de que un usuario presiona Play (sólo vídeo).
  • precarga determina cómo y cuándo el navegador cargará el archivo de medios de comunicación mediante tres valores posibles: Ninguno significa que el video no se descargará hasta que el usuario inicia la reproducción; metadatos indica al explorador para descargar sólo suficientes datos para determinar la altura, anchura y duración de los medios de comunicación; automático permite el navegador decidir cuánto del video para iniciar la descarga antes de que el usuario inicia la reproducción.
  • AutoPlay es un atributo booleano se utiliza para iniciar un video tan pronto como se carga la página (dispositivos móviles suelen ignoran para conservar el ancho de banda).
  • bucle es un atributo booleano que provoca un video para volver a empezar cuando llega al final.
  • silenciado es un atributo booleano que especifica si el vídeo debe comenzar silenciado.
  • controles es un atributo booleano que indica si el explorador debe mostrar sus propios controles.
  • ancho y alto decir un video para mostrar en un determinado tamaño (sólo vídeo; no puede ser un porcentaje).

Pistas de texto temporizado

Navegadores también están comenzando a implementar el elemento de pista, que proporciona subtítulos, subtítulos, traducciones y comentarios a los vídeos. Aquí es un elemento de vídeo con un elemento de pista de niño:

<video id="video1" width="640" height="360" preload="none" controls>
  <track src="subtitles.vtt" srclang="en" kind="subtitles" label="English subtitles">
</video>

En este ejemplo, he utilizado cuatro de cinco atributos posibles del elemento de pista:

  • src es un enlace a un archivo de texto temporizado Web Video (WebVTT) o un archivo de lenguaje de marcado de texto temporizado (TTML).
  • srclang es el idioma del archivo TTML (tal como es, es o ar).
  • tipo indica el tipo de contenido de texto: subtítulos, títulos, descripciones, capítulos o metadatos.
  • etiqueta contiene el texto que se muestra a un usuario seleccionar una pista.
  • por defecto es un atributo booleano que determina el elemento de pista de inicio.

WebVTT es un formato basado en texto simple que comienza con una declaración de una línea (archivo WEBVTT) y luego las listas comienzan y terminan veces separados por--> caracteres, seguidos por el texto que se muestra entre los dos tiempos. Aquí es un simple archivo de WebVTT que muestra dos líneas de texto en dos intervalos de tiempo diferentes:

WEBVTT FILE

00:00:02.5 --> 00:00:05.1
This is the first line of text to display.
00:00:09.1 --> 00:00:12.7
This line will appear later in the video.

Este escrito, sólo Internet Explorer 10 Platform Preview y cromo 19 admiten el elemento de pista, pero otros navegadores se esperan hacerlo pronto. Algunas de las bibliotecas de JavaScript discutir posteriormente agregan soporte para el elemento de pista para navegadores que todavía no lo han aplicado, pero también es una biblioteca de pista independiente llamada captionator.js (captionatorjs.com) que analiza realizar un seguimiento de etiquetas, lee los archivos WebVTT y TTML (así como SRT y YouTube SBV) y proporciona una interfaz de usuario para los navegadores que aún no tienen soporte nativo.

Secuencias de comandos de medios de HTML5

Anteriormente, usé el atributo controles para decirle el navegador para mostrar sus controles nativos de las etiquetas de audio o vídeo. El problema con esto es que cada navegador tiene un conjunto de controles que es poco probable que coincida con el diseño del sitio Web diferente. Para crear una experiencia coherente, puede quitar los controles del explorador y, a continuación, agregar botones personalizados a la página que controlan con JavaScript. También puede añadir detectores de eventos para realizar un seguimiento del Estado de la reproducción de audio o vídeo. En el siguiente ejemplo, he quitado el atributo controles y agregado marcado debajo el video para servir como una barra de control básico:

<video id="video1" style="width:640px; height:360px" src="video.mp4"> 
</video> 
<div>
  <input type="button" id="video1-play" value="Play" />
  <input type="button" id="video1-mute" value="Mute" />
  <span id="video1-current">00:00</span>
  <span id="video1-duration">00:00</span>
</div>

La simple JavaScript en figura 1 control de reproducción de vídeo y mostrar el actual momento en el video y creará el jugador completo de trabajo representado en figura 2(prestados en Internet Explorer 9). (Tenga en cuenta que en HTML5, el tipo = "text/javascript" atributo no es necesaria en la etiqueta script.)

Figura 1 control de reproducción de vídeo

<script>
// Wrap the code in a function to protect the namespace
(function() {
// Find the DOM objects
var  video = document.getElementById("video1"),
  playBtn = document.getElementById("video1-play"),
  muteBtn = document.getElementById("video1-mute"),
  current = document.getElementById("video1-current"),
duration = document.getElementById("video1-duration");

// Toggle the play/pause state
playBtn.addEventListener("click", function() {
  if (video.paused || video.ended) {
    video.play();
    playBtn.value = "Pause";
  } else {
    video.pause();
    playBtn.value = "Play";
  }
}, false);

// Toggle the mute state
muteBtn.addEventListener("click", function() {
  if (video.muted) {
    video.muted = false;
    muteBtn.value = "Mute";
  } else {
    video.muted = true;
    muteBtn.value = "Unmute";
  }
}, false);

// Show the duration when it becomes available
video.addEventListener("loadedmetadata", function() {
  duration.innerHTML = formatTime(video.duration);
}, false);

// Update the current time
video.addEventListener("timeupdate", function() {
  current.innerHTML = formatTime(video.currentTime);
}, false);

function formatTime(time) {
  var 
    minutes = Math.floor(time / 60) % 60,
    seconds = Math.floor(time % 60);

  return   (minutes < 10 ? '
0' + minutes : minutes) + ':' +
           (seconds < 10 ? '
0' + seconds : seconds);
}

})();

A Working Video Player That Shows the Time
Figura 2 reproductor de Video que muestra el tiempo de trabajo

El código de figura 1 presenta la obra y métodos de pausa, los eventos timeupdate y loadedmetadata y las propiedades en pausa, terminadas, currentTime y duración. Los medios de HTML5 completos API (w3.org/TR/html5/video.html) incluye mucho más que pueden utilizarse para crear un reproductor de pleno derecho. Además de la HTML5 medios etiqueta atributos enumerados anteriormente, objetos multimedia de HTML5 tienen otras propiedades accesibles sólo a través de JavaScript:

  • currentSrc describe el archivo multimedia del explorador se juega cuando se utilizan etiquetas de origen.
  • videoHeight y videoWidth indican las dimensiones del vídeo nativas.
  • volumen especifica un valor entre 0 y 1 para indicar el volumen. (Dispositivos móviles ignoran esta a favor de controles de volumen de hardware).
  • currentTime indica la posición de reproducción actual en segundos.
  • duración es el tiempo total en segundos del archivo multimedia.
  • intermedia es una matriz que indica qué partes del archivo multimedia se han descargado.
  • playbackRate es la velocidad a la que se reproduce el vídeo (por defecto: 1). Cambiar este número para ir más rápido (1.5) o lento (0,5).
  • terminó indica si el video ha llegado al final.
  • en pausa es siempre cierto en Inicio y, a continuación, falso, una vez que el vídeo ha comenzado jugando.
  • buscando indica el navegador intenta descargar y pasar a una nueva posición.

HTML5 los objetos multimedia también incluyen los siguientes métodos de secuencias de comandos:

  • jugar intenta cargar y reproducir el vídeo.
  • pausa detiene un video reproduciendo actualmente.
  • canPlayType(type) detecta los codecs un explorador admite. Si envías un tipo como video/mp4, el navegador responderá con probablemente, quizás, no o una cadena vacía.
  • cargar se llama para cargar el nuevo video si cambia el atributo src.

Las especificaciones de medios de comunicación de HTML5 ofrece 21 eventos; éstos son algunos de los más comunes:

  • loadedmetadata se desencadena cuando se conocen la duración y las dimensiones.
  • loadeddata se desencadena cuando el explorador puede jugar en la posición actual.
  • jugar el vídeo se inicia cuando el vídeo ya no está en pausa o terminó.
  • jugando se desencadena cuando la reproducción ha comenzado después de una pausa, búfer o buscando
  • pausa detiene el vídeo.
  • terminó se desencadena cuando se llega al final del video.
  • progreso indica que se ha descargado más de archivo multimedia.
  • buscando es true cuando el navegador ha comenzado buscando.
  • encaminan es false cuando el navegador ha terminado buscando.
  • timeupdate dispara como está jugando el recurso de medios de comunicación.
  • volumechange se desencadena cuando se silencian o volumen propiedades han cambiado.

Estas propiedades, métodos y eventos son herramientas poderosas para presentar los usuarios con una experiencia de medios enriquecidos, todas gobernada por HTML, CSS y JavaScript. En el ejemplo básico de figura 1, primero crear variables para todos los elementos de la página:

// Find the DOM objects
var video = document.getElementById("video1"),
  playBtn = document.getElementById("video1-play"),
  muteBtn = document.getElementById("video1-mute"),
  current = document.getElementById("video1-current"),
  duration = document.getElementById("video1-duration");

Luego agrego un evento click a Mis botones para controlar la reproducción multimedia. Aquí alternar la obra y pausa el estado del vídeo y cambiar la etiqueta del botón:

// Toggle the play/pause state
playBtn.addEventListener("click", function() {
  if (video.paused || video.ended) {
      video.play();
      playBtn.value = "Pause";
  } else {
      video.pause();
      playBtn.value = "Play";
  }
}, false);

Por último, agrego eventos al objeto de medios para realizar un seguimiento de su estado actual. Aquí, escucha para el evento timeupdate y actualización de la barra de control al tiempo actual de la cabeza lectora, formato a los segundos a un estilo de minutos: segundos:

// Update the current time
video.addEventListener("timeupdate", function() {
  current.innerHTML = formatTime(media.currentTime);
}, false);

Problemas con medios de HTML5

Por desgracia, obtener medios de HTML5 para trabajar en todos los navegadores y dispositivos no es tan simple como en mi ejemplo.Ya he mencionado que no todos los exploradores admiten el elemento de pista, y ahora voy abordar tres cuestiones adicionales que surgir al utilizar las etiquetas de audio y vídeo, junto con soluciones para superarlos.Al final del artículo, presentaré algunas librerías de JavaScript que envuelven todas estas soluciones en paquetes solo, puede implementar fácilmente.

HTML5 Audio y Video Codec apoyo la primera cuestión que enfrenta al desarrollar con medios de HTML5 es el inconsistente apoyo de códecs de audio y vídeo.Ejemplos de mis trabajan en Internet Explorer 9 y versiones posteriores, Chrome y Safari, pero no funcionan en Firefox u Opera porque aunque los exploradores admiten la etiqueta de vídeo HTML5, no admiten el códec h.264.Debido a problemas de derechos de autor, proveedores de navegador han dividido en dos campos de códec, y eso nos lleva al gráfico de HTML5 Media familiar en figura 3, mostrando qué códecs funcionan con los navegadores.

Figura 3 Codec apoyo en distintos navegadores

Video IE8 AGILIZARÁN + Cromo Safari Dispositivos móviles Firefox Ópera
MP4 (h.264/AAC) no sí sí sí sí no no
WebM (VP8/Vorbis) no instalar sí no no sí sí

 

Internet Explorer 9++, Safari, Chrome y dispositivos móviles (iPhone, iPad, Android 2.1 + y Windows Phone 7.5 +) apoyan el códec de vídeo h.264, que normalmente se coloca en un contenedor MP4.Firefox y Opera, por el contrario, apoyar el códec de vídeo VP8, se coloca dentro del contenedor WebM.Cromo también soporta WebM y se ha comprometido a eliminar el soporte de h.264 en algún momento.Internet Explorer 9++ puede representar WebM si el códec ha sido instalado por el usuario final.Por último, Firefox, Opera y Chrome también apoyan el códec de Theora colocado dentro de un contenedor Ogg, pero esto ha sido en gran medida gradualmente en favor de WebM (a menos que necesite soporte Firefox 3.x), me he quedado fuera del gráfico y ejemplos de simplicidad.

Para el audio, los proveedores de explorador se dividen nuevamente en dos campamentos, con el primer grupo (Internet Explorer 9, Chrome y Safari) apoyo familiar formato MP3 y el segundo grupo (Firefox y Opera) apoyando el códec Vorbis dentro de un contenedor Ogg.Muchos exploradores también pueden reproducir el formato de archivo WAV.Consulte la figura 4.

Figura 4 Audio apoyo en distintos navegadores

Audio IE8 AGILIZARÁN + Cromo Safari Dispositivos móviles Firefox Ópera
MP3 no sí sí sí sí no no
Ogg Theora no instalar sí no no sí sí
WAV no no tal vez sí sí sí sí

 

Para hacer frente a estas diferencias, las etiquetas de audio y vídeo admiten varias etiquetas de origen infantil, que permite a los exploradores elija un archivo de medios de comunicación pueden desempeñar.Cada elemento de origen tiene dos atributos:

  • src especifica un URL de un archivo multimedia.
  • tipo especifica el tipo MIME y opcionalmente el códec específico del vídeo.

Ofrecer h.264 y códecs de vídeo VP8, se utilizaría el siguiente marcado:

<video id="video1" width="640" height="360">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
</video>

Observe que las versiones anteriores de iOS y Android necesitan el archivo MP4 para aparecer en primer lugar.

Esta marca funcionará en todos los navegadores modernos. El código JavaScript controlará cualquier video el navegador decide puede jugar. Para el sonido, la marca tiene este aspecto:

<audio id="audio1">
  <source src="audio.mp3" type="audio/mp3">
  <source src="audio.oga" type="audio/oga">
</audio>

Si va a alojar contenido de audio o vídeo en su propio servidor, debe tener el tipo MIME correcto para cada archivo multimedia o muchos navegadores HTML5-listo (como Internet Explorer y Firefox) no jugarán los medios de comunicación. Para agregar tipos MIME en IIS 7, vaya a la vista de características, haga doble clic en tipos MIME, haga clic en el botón Añadir en el panel Acciones, añadir la extensión (mp4) y el tipo MIME (video/mp4) y, a continuación, haga clic en Aceptar. A continuación, hacer lo mismo para los otros tipos (webm y video/webm) va a utilizar.

Apoyo a los navegadores antiguos incluyendo dos archivos multimedia (como MP4 y WebM para vídeo) hace HTML5 medios de trabajo en todos los navegadores modernos. Pero cuando los navegadores antiguos (como Internet Explorer 8) encuentran la etiqueta de vídeo, no pueden mostrar el vídeo. Ellos, sin embargo, representará el HTML poner entre la apertura <video> y cierre </video> etiquetas. En el ejemplo siguiente se incluye un mensaje instando a los usuarios obtener un explorador más reciente:

<video id="video1" width="640" height="360" >
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <p>Please update your browser</p>
</video>

Para permitir a los visitantes con navegadores no-HTML5-listo reproducir el vídeo, puede proporcionar una alternativa con Flash incorporado que se reproduce el mismo MP4 suministro para Internet Explorer 9, Safari y Chrome, como se muestra en figura 5.

Figura 5 reproducción de vídeo con Flash

 

<video id="video1" width="640" height="360" >
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <object width="640" height="360" classid="clsid:
    d27cdb6e-ae6d-11cf-96b8-444553540000" codebase=
      "http://fpdownload.macromedia.com/pub/
      shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
        <param name="SRC" value="player.swf?file=video.mp4">
        <embed src="player.swf?file=video.mp4" width="640"
          height="360"></embed> 
        <p>Please update your browser or install Flash</p>
  </object>
</video>

Esta marca presenta todos los navegadores con alguna forma de reproducir vídeo. Navegadores con HTML5 ni Flash aparecerá un mensaje instándole a actualizar. Para obtener más información sobre cómo y por qué funciona esta marca anidada, consulte "Video para todos" Kroc Camen (camendesign.com/code/video_for_everybody).

No obstante, este enfoque tiene algunos inconvenientes. En primer lugar, hay un montón de marcado para mantener. En segundo lugar, se debe codificar y almacenar archivos de al menos dos medios de comunicación. Y en tercer lugar, los controles HTML/JavaScript que añadir a la página no funciona con el reproductor de Flash incrustado. Más tarde, te sugiero varias bibliotecas de JavaScript que pueden ayudar a superar estos problemas, pero primero, vamos a tratar un tema final.

Compatibilidad con pantalla completa Flash y Silverlight incluyen un modo de pantalla completa que permite a los usuarios ver video y otro contenido en su pantalla todo. Puede implementar esta función por crear un botón simple y empatar a ActionScript (de Flash) o C# (para Silverlight) comando de pantalla completa.

Los navegadores de hoy tienen un modo de pantalla completa similar que los usuarios pueden activar con un teclado o comando de menú (a menudo F11 o Ctrl + F). Pero hasta hace poco, ninguna API JavaScript equivalente permitió a los desarrolladores iniciar el modo de pantalla completa desde un botón en una página. Esto significaba que HTML5 video podría mostrarse sólo en una "ventana completa" que llena la ventana del navegador, pero no toda la pantalla.

En finales de 2011, Safari, Chrome y Firefox agregan soporte para el W3C propuesta FullScreen API, que ofrece capacidades similares a las de Flash y Silverlight. El equipo de la ópera está trabajando actualmente en ejecución, pero el equipo de Internet Explorer tiene, como esta escrito, aún no decidió si implementará la API. El navegador de estilo Metro de Windows 8 será pantalla completa por defecto, pero los usuarios de Internet Explorer escritorio tendrá que entrar en el modo de pantalla completa manualmente utilizando las opciones de menú o la tecla F11.

Para entrar en modo de pantalla completa en los navegadores que lo soportan, llame al requestFullscreen método en el elemento que muestra la pantalla completa. Se llama al comando para salir de pantalla completa en el objeto de documento: método de Document.exitFullscreen. La propuesta de W3C es todavía un trabajo en progreso, así que no entro en más detalle aquí, pero yo estoy seguimiento del Estado de la API en mi blog: bit.ly/zlgxUA.

HTML5 Librerías de JavaScript de Audio y vídeo

Un número de desarrolladores ha creado bibliotecas de JavaScript que HTML5 audio y vídeo más fácil al integrar todo el código correspondiente en un solo paquete. Algunas de las bibliotecas mejor abierto son MediaElement.js, jPlayer, VideoJS, Projekktor, Playr y LeanBack. Encontrará una lista completa con la comparación de las características en praegnanz.de/html5video.

Todo lo que necesita hacer es proporcionar una etiqueta de vídeo o de audio y la biblioteca será automáticamente crear un conjunto de controles personalizados, así como insertar un reproductor Flash para navegadores que no admiten medios de HTML5. El único problema es que los reproductores Flash que inserción muchas bibliotecas no siempre mirar o funcionar como el jugador de HTML5. Esto significa que cualquier evento de HTML5 que agregar no funcionará con el reproductor de Flash y cualquier CSS personalizado que utiliza no sea visible.

En mi trabajo, me pidieron crear un reproductor de vídeo HTML5 con diapositivas sincronizadas y transcripciones (véase online.dts.edu/player para una demostración). Teníamos una biblioteca existente de más de 3.000 archivos de vídeo h.264 y se consideró inviable para transcodificarles a WebM para Firefox y Opera. También necesitábamos soportar los navegadores antiguos como Internet Explorer 8, pero un Flash separado suplencia no funciona porque no responder a los eventos para las diapositivas y transcripciones.

Para superar estas dificultades, he creado uno de los jugadores mencionados anteriormente llamado MediaElement.js (mediaelementjs.com). Es una biblioteca de JavaScript de código abierto (MIT/GLPv2) que incluye jugadores especiales de Flash y Silverlight que imitan la API HTML5. En lugar de un reproductor Flash totalmente independiente, MediaElement.js utiliza Flash sólo para procesar vídeo y, a continuación, se ajusta el video con un objeto de JavaScript que se ve al igual que la API de HTML5. Esto actualiza eficazmente todos los navegadores por lo que pueden utilizar la etiqueta de vídeo y códecs adicionales no nativamente compatible. Para iniciar el reproductor con un archivo único h.264 utilizando jQuery, necesita sólo el siguiente código:

<video id="video1" width="640" height="360" src="video.mp4" controls>
</video>
<script>
jQuery(document).ready(function() {
  $("video1").mediaelementplayer();
});
</script>

Para los navegadores que no admiten la etiqueta de vídeo (como Internet Explorer 8) o aquellos que no admiten h.264 (Firefox y Opera), MediaElement.js insertará el Flash (o Silverlight, dependiendo de lo que el usuario ha instalado) cuña para "Actualizar" los exploradores lo obtienen las propiedades de medios de HTML5 y eventos que he cubierto.

Para soporte de audio, puede utilizar un único archivo MP3:

<audio id="audio1" src="audio.mp3" controls></audio>

Alternativamente, se puede incluir un único archivo Ogg/Vorbis:

<audio id="audio1" src="audio.oga" controls></audio>

Una vez más, para los navegadores que no admiten la etiqueta audio (Internet Explorer 8) o para aquellos que no admiten Ogg/Vorbis (9++ de Internet Explorer y Safari), MediaElement.js insertar una cuña para "Actualizar" los exploradores para todos funcionan como si ellos compatibles de forma nativa el códec. (Nota: Ogg/Vorbis no será jugable en dispositivos móviles.)

MediaElement.js también incluye soporte para el elemento de pista, así como el modo nativo de pantalla completa para los navegadores que han implementado la API de JavaScript. Puede agregar sus propios eventos de HTML5 o realizar un seguimiento de las propiedades y trabajará en cada navegador y dispositivo móvil.

Espero que he mostrado que a pesar de algunas peculiaridades, los elementos de audio y vídeo de HTML5, especialmente cuando emparejado con las bibliotecas excelentes que he sugerido, son fáciles de agregar a los sitios Web existentes y debe ser el valor predeterminado para los nuevos proyectos.

John Dyer es el director de desarrollo Web para el seminario teológico de Dallas (dts.edu). Blogs de él en j.hn.

Gracias a los siguientes expertos técnicos para revisar este artículo: John Hrvatin y Brandon Satrom