Crear reproductor de video en HTML5

Alguna vez me ha surgido la necesidad de reproducir videos en páginas web de mis clientes sin utilizar los formatos conocidos como Youtube ó Vimeo.

Hace poco que un cliente me pidió la necesidad de que se visualizara un video en su web pero no quería reproducirlo a través de Youtube porque no quería ver publicidad en su página web. Para ello opté de una manera muy sencilla en instalar un reproductor mediante HTML5.

Para poder reproducir un video en HTML5 utilizaremos las etiquetas

1
<video width="300" height="150"></video>

Etiquetas sencillas de html con etiqueta de apertura y cierre.

La anatomía del elemento Video en HTML5.

src
 Dirección URL del archivo de vídeo.
width y height
 Dimensiones del vídeo. Si no especificamos width y height, el elemento usará como valor por defecto el ancho y alto del archivo de vídeo.
controls
 El navegador mostrará sus controles de vídeo nativos para la reproducción y el volumen. Si se omite, el usuario sólo verá el primer fotograma (o la imagen poster especificada) y no será capaz de reproducir el vídeo.
poster
El atributo poster sirve para indicarnos el fotograma de video que queremos cuando se está cargando o cuando este no se reproduce. Si no se incluye, se  usará el primer fotograma del vídeo.

Existen algunos navegadores web que no admiten actualmente , se puede incluir contenido alternativo. Como mínimo podría incluirse un texto y un enlace al archivo de vídeo en sí, de modo que los usuarios puedan descargar y reproducirlo con la aplicación que deseen

Ejemplo

1
2
3
<video poster="/images/fotograma.jpg" controls="controls" width="350" height="200">
<source src="http://www.tupaginaweb.com/video.mp4" type="video/mp4" />
<source src="http://www.tupaginaweb.com/video.webm" type="video/webm" /></video>

Como habéis podido observar he creado 2 rutas de archivo con 2 tipos de formatos diferente para el mismo video. Esto se debe a que en la siempre lucha de navegadores (Internet Explorer, Firefox, Ópera, Chrome..)por los formatos que se utilizan para reproducir código, en algunas se podrá visualizar el tipo de video .mp4 y en otros el tipo de video .webm.

Mi consejo es que convirtáis vuestros videos al menos en esos 2 formatos y que siempre comprobéis que funcionan en todos los navegadores.

Formatos de Video en archivo .htaccess

Si probáis en los navegadores con los 2 tipos de video y os sale un mensaje de alerta en el que os dicen que el navegador no soporta el fomato de video, deberéis insertar en el archivo .htaccces de vuestra página web el siguiente código:

 

1
2
AddType video/mp4 .mp4
AddType video/webm .webm
The following two tabs change content below.
vaqueroandreu@gmail.com'
Desarrollador Web Freelance / Asesor de Estrategias de Marcas online / Consultor SEO. Seguimos aprendiendo..
vaqueroandreu@gmail.com'

Latest posts by vaqueroandreu (see all)

1 respuesta

  1. lucasdimarleodora79@gmail.com' mas info dice:

    Acostumbro cada dia buscar posts para pasar un buen momento leyendo y de esta forma me he tropezado vuetro post. La verdad me ha gustado el articulo y pienso volver para seguir pasando buenos ratos.
    Saludos

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

A %d blogueros les gusta esto: