Clicky

Cómo hacer un reproductor de vídeo con HTML5

video player en HTML5

Usaremos el elemento <video> para añadir un vídeo a la página web sin necesidad de ningún plugin

Poner un vídeo con marcado HTML5 es simple, no más complejo para cualquier navegador que la colocación de una imagen. En este artículo vamos a ver todas las ventajas del soporte del navegador integrado para construir el reproductor de video más simple posible.

Pondremos un marco básico para la aplicación y luego usaremos el elemento <video> para añadir un vídeo a la página web sin necesidad de ningún plugin en absoluto.

Requisitos previos

Usa Chrome, Safari o Internet Explorer 9+. Por el momento tendrás que evitar Firefox y Opera, debido a los problemas de formato de archivo de vídeo a través del navegador. Aunque el soporte para el elemento de vídeo es compatible con todos los navegadores modernos, el formato MP4 no es totalmente soportado por Firefox y Opera. Puedes comprobar la compatibilidad aquí.

Antes de empezar tendrás que encontrar un archivo .mp4 que se puede utilizar, si no tiene uno a mano, podrás encontrar gran cantidad de archivos .mp4 gratis en línea.

Construcción de la estructura básica

El código siguiente es el marco en torno al cual se construye el reproductor de vídeo. Crea un diseño simple y tiene un marcador de posición para el vídeo en sí.

Es necesario crear un nuevo archivo HTML en el directorio de trabajo con el nombre index.html, a continuación, agrega este código:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Reproductor de vídeo con HTML5</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>Reproductor de vídeo con HTML5</h1>
    </header>
    <section id="player">
        <div>
                <!-- El vídeo aparecerá aquí -->
        </div>
    </section>
</body>
</html>

Ahora, con las bases establecidas, vamos a llegar a la parte divertida del reproductor mediante la adición de un video a la página.

Utilizando el elemento <video> para añadir vídeos a páginas web

El objetivo en el diseño del elemento de HTML5 <video> es hacer la incorporación de vídeo en una página web tan sencillo como incrustar una imagen. Aunque te vas a encontrar complejidades adicionales ya que los formatos de archivo de vídeo tienen características más ricas que los formatos de imagen, pero ya se ha alcanzado el objetivo de diseño.

Esto es como se ve en Chrome un vídeo de HTML5:

video con HTML5

El siguiente listado muestra todo el código necesario para mostrar el video. Como puedes ver, no es complicado.

Inserta en el código anterior este código en lugar del comentario "<!-- El vídeo aparecerá aquí->", asegurándote de reemplazar [TU VIDEO] con la ruta de tu .mp4, y actualiza la página:

<video src="/[ TU VIDEO ].mp4"
controls
width="560" height="315">
Tu navegador no soporta el elemento video, por favor sigue este enlace para <a href="/demos/videohtml5/doberman-gato.mp4">Descargar el vídeo.</a>
</video>

En este código, el atributo src es la ruta y el nombre de archivo del archivo .mp4, el atributo controls indica que deseas para el vídeo los controles estándar (omitir si no deseas que controles) y la anchura (width) y la altura (height) son fáciles de entender. El texto dentro del elemento es nuevo texto hasta que aparezca el reproductor si la etiqueta video no es reconocida por el navegador.

Puedes ver la demo en esta página: Reproductor de vídeo con HTML5

Resumen

La red cada vez está siendo más utilizada como un reemplazo para los medios de difusión tradicionales. Los servicios como Netflix, YouTube, Spotify, last.fm y Google Music buscan reemplazar el DVD y la colección de CDs con los reproductores en línea. Con HTML5, el vídeo y el audio se convierten en ciudadanos de primera clase en los contenidos web. En lugar de entregar la responsabilidad del reproductor de medios a una aplicación de terceros, reproduciendo en el navegador nos permite controlar y manipular los medios desde la aplicación web.

Como se puede ver HTML5 hace que el proceso de agregar audio y vídeo a las páginas web sea muy sencillo, como lo es para agregar imágenes.

Jesus_Caceres