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

HTML5

Uso de medios en HTML5

Jason Beres

 

A menos que haya estado viviendo en una isla remota para el año pasado o así, probablemente haya oído el zumbido y hype alrededor de HTML5. No, HTML5 no se cura más enfermedades, ni finalizará el hambre del mundo, pero está preparada para remodelar el rico entorno de aplicaciones de Internet. Con la de exageración sobre el nuevo estándar HTML, es importante llevar la discusión de vuelta a la tierra. Aquí están los hechos importantes que necesita saber acerca de esta nueva especificación de HTML:

• HTML5 es la primera versión nueva de la especificación desde 1999, la Web ha cambiado mucho desde entonces.
• HTML5 será el nuevo estándar para HTML, XHTML y el DOM de HTML.
• HTML5 proporciona una forma estándar de reproducción de multimedia: una clave se benefician porque no había ningún estándar para reproducir archivos multimedia en una página Web sin un complemento de explorador y no garantiza que todos los exploradores admiten el plug-in.
• HTML5 sigue siendo un trabajo en curso, pero los navegadores más modernos tienen cierta compatibilidad con la etiqueta de HTML5.

Cuando Silverlight 1.0 se envían en 2007, Microsoft presentado su reproducción de audio y vídeo como las características principales y una razón principal para ver Silverlight como una alternativa a Flash, que es compatible con una versión u otra en el 95 por ciento de los exploradores en todo el mundo. Como consecuencia de esto, Silverlight es compatible con aproximadamente el 75 por ciento de los exploradores en todo el mundo, o cerca de tres de cada cuatro equipos. Pero si quiere para reproducir archivos multimedia y no desea la molestia o la dependencia de un plug-in, HTML5 es la respuesta.

Para ver la diferencia entre el uso de la etiqueta de vídeo HTML5 y la etiqueta de objeto tradicional para reproducir archivos multimedia, considere el ejemplo de figura 1.

Figura 1 Las etiqueta de HTML Video vs. la etiqueta de objeto para reproducir multimedia

<section>
    <h1>Using the HTML5 Video tag to play video</h1>
    <video src="video1.mp4" >
    </video>
</section>
<section>
    <h1>Using the Object tag to play media using the Flash plug-in</h1> 
    <object type="application/x-shockwave-flash"
               data="player.swf" width="290" height="24">
        <param name="movie" value="player.swf">
    </object>
</section>

¿Cuál es el problema? Ambos ejemplos son simples y fáciles de implementar. Pero lo más importante aquí es que debido a que la <video> etiqueta es un estándar, no hay duda de que se utiliza para reproducir archivos multimedia. No tienes que adivinar si un explorador tiene una versión determinada de un determinado plug-in instalada para reproducir archivos multimedia. La parte del estándar es lo que ha sido que faltan en HTML.

Admite formatos de medios en HTML5

Para utilizar medios de comunicación en la siguiente aplicación de HTML5, necesita saber qué formatos son compatibles. HTML5 es compatible con AAC, MP3 y Ogg Vorbis para audio y Ogg Theora, WBEM y MPEG-4 para el vídeo.

Aunque HTML5 es compatible con estos formatos de medios, sin embargo, no todos los exploradores es compatible con cada formato. Figura 2 muestra los exploradores actuales y que admiten los formatos de medios.

Compatibilidad con medios de la figura 2 en los exploradores actuales

Mediante la etiqueta de vídeo

Para reproducir un vídeo en una página de HTML5, basta con usar el <video> etiqueta, como se muestra aquí:

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

El atributo src (http://www.w3.org/TR/html5/video.html#the-source-element) establece el nombre o nombres del vídeo para reproducir y dictados de switch de tipo Boolean del control ya muestra controles de reproducción de la predeterminada.También puede utilizar otras dos propiedades Boolean — reproducción automática y loop, al configurar la etiqueta de vídeo.Figura 3 muestra cada atributo de propiedad y su valor.

Figura 3 Propiedades de la etiqueta de vídeo

Atributo	Valor	Descripción
Audio	Silenciado	Define el estado predeterminado del audio.Silencio en la actualidad, sólo se permite.
AutoPlay	AutoPlay	Si está presente, el vídeo empieza a reproducirse en cuanto esté listo.
Controles	Controles	Agrega controles de reproducción, pausa y volumen.
Height	Píxeles	Establece el alto del Reproductor de vídeo.
Loop	Loop	Si está presente, el vídeo se iniciará de nuevo cada vez que termina.
Póster	dirección URL	Especifica la dirección URL de una imagen que representa el vídeo.
Precarga	Precarga	Si está presente, el vídeo se carga al cargar la página y está listo para ejecutarse.Se omite si la reproducción automática está presente.
Src	dirección URL	La dirección URL del vídeo para jugar.
Width	Píxeles	Establece el ancho del Reproductor de vídeo.

El código siguiente muestra algunas de las propiedades claves en el Reproductor de vídeo en un escenario común que incluye la configuración de la altura y anchura, Pausar reproducción automática, el bucle y controles de propiedades, que mostrarán la obra, y controla el volumen, así como un mensaje de error de reserva.

<video src="video.mp4" width="320" height="240" autoplay controls loop>
    Your browser does not support the video tag.
</video>

También puede establecer el typeusing MIME específico el atributo de tipo y el códec en el elemento de origen. Estos ejemplos utilizan el atributo type para establecer el tipo MIME y la codificación de los medios de comunicación:

<!-- H.264 Constrained baseline profile video (main and extended video compatible)
  level 3 and Low-Complexity AAC audio in MP4 container -->
<source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<!-- H.264 Extended profile video (baseline-compatible) level 3 and Low-Complexity
  AAC audio in MP4 container -->
<source src='video.mp4' type='video/mp4; codecs="avc1.58A01E, mp4a.40.2"'>

Puede establecer propiedades en HTML o JavaScript. El código siguiente muestra cómo establecer la propiedad de controles de tipo Boolean en HTML y JavaScript.

<!-- 3 ways to show the controls -->
<video controls>
<video controls="">
<video controls="controls">
// 2 ways to show controls in JavaScript
video.controls = true;
video.setAttribute
       ('controls',
        'controls');

Cuando no sabe si un explorador hará que la página, es necesario un mecanismo de reserva para reproducir archivos multimedia. Tiene que hacer es lista se procesa el vídeo en los formatos de vídeo y el explorador reproduce el primero de ellos admite. También puede agregar texto como último recurso para informar al usuario de que el explorador que se usa no admite la reproducción nativa de HTML5 de vídeo. El siguiente código incluye varias fuentes de vídeo, así como un mensaje de reserva que se indica ninguna compatibilidad HTML5.

<video controls>
    <source src="video1.mp4" />
    <source src="video1.ogv" />
    <source src="video1.webm" />
    <p>This browser does not support HTML5 video</p>
</video>

Si desea asegurarse de que se reproduce el vídeo, puede incluir la etiqueta de objeto para reproducir una versión de Flash, también de este modo:

<video controls>
    <source src="video1.mp4" />
    <source src="video1.ogv" />
    <source src="video1.webm" />
    <object data="videoplayer.swf">
        <param name="flashvars" value="video1.mp4">
        HTML5 Video and Flash are not supported
    </object>
</video>

También puede usar JavaScript para comprobar si un formato de vídeo es compatible con la comprobación de la propiedad canPlayType, como sigue:

var video = document.getElementsByTagName('video')[0];
if (video.canPlayType)
   { // video tag supported
if (video.canPlayType('video/ogg; codecs="theora, vorbis"'))
      { // it may be able to play}
        else
      {// the codecs or container are not supported
        fallback(video);
  }
}

Si desea hacer algo más expresivo que el texto simple de reserva, puede utilizar el detector de eventos onerror para pasar el error:

<video src="video.mp4"
       onerror="fallback(this)">
       video not supported
</video>

Mediante la propiedad de póster, puede especificar la dirección URL de una imagen para mostrar en lugar del vídeo en el formulario. Normalmente está mostrando una lista de vídeos o un vídeo en un formulario, por lo que tener una forma sencilla de mostrar una vista previa del vídeo en el formulario de una imagen ofrece una mejor experiencia de usuario. Aquí es la propiedad de póster en acción:

<video src="video1.mp4" poster="preview.jpg" </video>

Por último, mediante el uso de un poco de JavaScript y HTML básico, puede crear un Reproductor de vídeo más interactivo. Figura 4 muestra cómo agregar un Reproductor de vídeo a un formulario con JavaScript y cómo responder a la entrada del usuario para el control.

Figura 4 Interactuando con vídeo en JavaScript

var video = document.createElement('video');
video.src = 'video1.mp4';
video.controls = true;
document.body.appendChild(video);
var video = new Video();
video.src = 'video1.mp4';
var video = new Video('video1.mp4')
<script>
    var video = document.getElementsByTagName('video')[0];
</script>
<input type="button" value="Play" onclick="video.play()">
<input type="button" value="Pause" onclick="video.pause()">

Para obtener una lista completa de eventos y capacidades para la reproducción de vídeo, consulte esta sección de las especificaciones en http://www.w3.org/TR/html5/video.html\#playing-the-media-resource.

Mediante la etiqueta de Audio

Mediante la etiqueta de audio es muy similar con la etiqueta video: pasar uno o más archivos de audio para el control y la primera de ellas se reproduce el explorador es compatible con.

<audio src="audio.ogg" controls>
 Your browser does not support the audio element.
</audio>

Figura 5 enumera las propiedades disponibles en la etiqueta de audio. El control no es necesario mostrar como un Reproductor de vídeo, por lo que no se incluyen propiedades como alto, ancho y el póster.

Figura 5 propiedades de la etiqueta de Audio

Atributo	Valor	Descripción
AutoPlay	reproducción automática	Si está presente, el audio empieza a reproducirse en cuanto esté listo.
Controles	controles	Controles, como un botón de reproducción, se muestran.
Loop	bucle	Si está presente, el audio empieza a reproducirse (bucle) cuando llega al final.
Precarga	precarga	Si está presente, el audio se carga al cargar la página y está listo para ejecutarse. Se omite si la reproducción automática está presente.
Src	dirección URL	La dirección URL del audio para reproducir.

Al igual que con la etiqueta de vídeo, puede pasar varios archivos a la etiqueta de audio y se reproducirá el primero de ellos es compatible. También puede utilizar un mensaje de reserva cuando el explorador no es compatible con la etiqueta de audio, como este:

<audio controls autoplay>
   <source src="audio1.ogg" type="audio/ogg" />
   <source src="audio1.mp3" type="audio/mpeg" />
    Your browser does not support the audio element.
</audio>

Resumen

HTML5 es el nuevo estándar para la Web y, dependiendo de los navegadores de que destino, puede empezar a utilizar algunas de las etiquetas nuevas, como audio y video, ahora mismo.Tenga cuidado al utilizar HTML5, sin embargo, debido a que no todos los exploradores es compatible con las nuevas etiquetas y, aunque no uno, puede que no admita todos los formatos de medios.Si está utilizando un explorador moderno que es compatible con HTML5, deberá realizar el trabajo adicional para procesar el medio en todos los formatos para asegurar el éxito del usuario.A continuación presentamos algunos recursos de Web grandes que proporcionan información de soporte de navegador, así como el resto de información que necesita para asegurar el éxito de la media de HTML5:

• http://dev.w3.org/html5/spec/Overview.HTML
• http://w3schools.com/html5/default.asp
• http://html5test.com/
• http://caniuse.com/

Jason Beres es el vicepresidente de Product Management, la Comunidad y el Evangelismo en Infragistics y lanza orientado al cliente, innovadoras características y funcionalidad a lo largo de todos los productos de Infragistics.Jason es una cuenta de Microsoft.NET MVP y es un miembro activo de la.NET Comunidad.Participa en docenas de eventos y conferencias en todo el mundo cada año.Es autor de ocho libros sobre temas que van desde Visual Basic y C# a SQL Server y Silverlight; su último es Professional Silverlight 4 (Wrox, 2010).Puede llegar a Jason en jasonb@infragistics.com o en twitter @ jasonberes.