Clicky

Revelando el proceso de reproducción de vídeos usando HTML5

html5 logo

Paso a paso del procedimiento de reproducción de vídeos con HTML5

Desde hace años los vídeos han sido considerados como los mejores medios de comunicación con los visitantes de un sitio web. Si tienes un sitio web de negocios o un sitio web informativo, colocar vídeos en tus páginas web puede actuar como una herramienta conveniente para la atraer la máxima atención de los usuarios de Internet que residen en diferentes partes del mundo.

Hoy en día, la mayoría de los clientes no son capaces de explorar un sitio web, simplemente por la incapacidad de ver el video colocado en la página principal del sitio. La última versión de HTML, es decir HTML5, ha marcado una revolución en el dominio de la normalización de reproducción de vídeo. Esta versión de HTML incluye especificaciones para una etiqueta de vídeo, lo que permite a los desarrolladores web añadir vídeo (s) a las páginas web de una manera similar a la adición de imágenes.

¿Por qué elegir HTML5 para reproducir vídeos?

El uso de la última versión de HTML permite a los desarrolladores web crear un script de Java que es capaz de fijar las inconsistencias entre navegadores y añade características tales como pantalla completa, subtítulos y una API para interactuar con el vídeo. Además de la variedad de características innovadoras disponibles con esta versión, puede experimentar un rendimiento de video mejorado debido a la falta de plug-in (Flash player, etc.) que por lo general se requiere para la reproducción del vídeo. La creación de la interacción entre el vídeo y otros elementos de la página también se hace posible usando esta versión HTML. Se puede incluso combinar etiquetas anidadas como un enfoque para especificar diferentes formatos de vídeo a los requisitos de los navegadores específicos.

Paso a paso del procedimiento de reproducción de vídeos con HTML5

A diferencia de otros lenguajes de marcado, HTML5 permite a los desarrolladores añadir vídeos a páginas web sin necesidad de ningún plugin en absoluto. A continuación, explico un proceso paso a paso que se sigue para la reproducción de vídeos con esta última versión de HTML.

Paso 1. Optar por un explorador tiene la intención de ver el video pudiendo usar Chrome, Safari o Internet Explorer 9 +. Se recomienda evitar Firefox y Opera debido a los problemas de formato de vídeo multi-navegador encontrados con ellos. Antes de comenzar, tendrás que encontrar un archivo mp4, que se puede utilizar como un vídeo de muestra para incrustar dentro de la página web. Si no puede encontrar uno dentro de tu repositorio, accede a Internet para una enorme colección de archivos .mp4 gratis.

Paso 2. Una vez que hayas terminado con la selección del navegador y los archivos mp4, lo siguiente que necesitas es construir el marco básico en el que será construido el reproductor de video.

Es necesario crear un nuevo archivo HTML en el directorio de trabajo y con un nombre como index.html. Después de esto, es necesario agregar el siguiente código para este archivo:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>HTML5 Video Player</title>
  <style>
    body {
        font-family: sans-serif;
        border: 0;
        margin: 0;
        padding: 0;
    }
    header {
        text-align: center;
    }
    #player {
        display: table;
        width: 100%;
        padding: 4px;
    }
    #player > div {
        display: table-cell;
        vertical-align: top;
    }
  </style>
</head>
<body>
  <header>
    <h1>HTML5 Video Player</h1>
  </header>
  <section id="player">
    <div>
        <!-- El vídeo aparecerá aquí -->
    </div>
  </section>
</body>
</html>

La inclusión del código anterior marca la fundación del reproductor de vídeo que va ser creado.

Paso 3. Esta es la parte divertida del reproductor donde  se le agrega un vídeo a la página web. El único objetivo en el diseño de elemento de vídeo de HTML5 es hacer que el proceso de incorporación de vídeo en una página web tan sencillo y práctico como la incrustación de imágenes.

Ahora, sólo tienes que insertar el código de abajo en lugar del comentario "<!-- El vídeo aparecerá aquí -->" en el código que se explica en el Paso 2.

<video src="/[NOMBRE DE TU VIDEO].mp4" controls width="640" height="264">
Tu navegador no soporta el elemento de vídeo, por favor trata de descargar #D el vídeo desde este lugar: <a href="/videos/VID_20120122_133036.mp4"></a>
</video>

Para el código de seguridad:

•  No te olvides de reemplazar [NOMBRE DE TU VIDEO] con la ruta de acceso a tu archivo mp4. Y actualiza la página.
•  El atributo "src" es la ruta y el nombre del archivo mp4.
•  El atributo "controls" indica tu preferencia por los controles estándar, que debe seguirse para el vídeo incrustado.
•  El atributo "width" indica la anchura del reproductor de vídeo
•  El atributo "height" indica la altura del reproductor de vídeo
•  El texto "Tu navegador no soporta el elemento de video, por favor intente descargar el vídeo desde este lugar" es el texto de respaldo que se debe mostrar en el caso de que la etiqueta de vídeo no sea reconocido por el navegador actualmente en uso.

Esta es la demo del vídeo que he creado con el tutorial:

Así es como se vería el vídeo HTML5 en Safari:

vídeo html5

HTML5-El mejor lenguaje para la interacción cliente-web

A diferencia del pasado, cuando la tecnología no estaba tan avanzada como hoy en día, la reproducción de vídeos en las páginas web era algo inimaginable. Con la aparición de HTML5 ver video se ha convertido en conveniente para los dueños de gadgets para ver vídeos sin necesidad de instalar nuevos plug-ins de forma repetitiva. Simplemente incrustando el código de video se puede ver el vídeo con facilidad.

•  La función de dispositivo de la compatibilidad de la última versión de HTML ha hecho la elección número uno de los empresarios, estudiantes y otras personas que necesitan acceder a la información. Si posees un iPhone, un iPad o cualquier otro smartphone, ahora es posible ver tus videos favoritos con HTML5. Con un control completo de la manipulación de los medios desde la aplicación web, esta última versión de HTML se ha convertido en una herramienta eficaz de transformación de las páginas con vídeo.

Jesus_Caceres