Mostrar un vídeo fácilmente en HTML5 + Bootstrap

Portada_video

FinderCar sigue con viento en popa, rumbo a su inminente salida a producción. Y, entre las decenas de cosas que tengo pensadas por hacer, una de las que quería sacar en su nacimiento era el visualizar un vídeo de promoción.

Así, mi socio ha hecho un .mp4 y lo he subido/almacenado en el Azure blob en donde persisto todas las imágenes y el contenido estático. Y yo he hecho una captura de un frame para ponerle una portada.

Y luego, tonto de mí, me he lanzado a buscar un plugin de jQuery que fuera sencillo y fácil de implementar.

Después de probar y probar, la realidad es que lo más fácil es utilizar las propias capacidades de HTML5 + Bootstrap, montando el player más sencillo posible.

<div class="container">
<div class="panel panel-default text-center">
<div class="panel-body">
<div align="center" class="embed-responsive embed-responsive-16by9">
                <video poster="@(ViewBag.PathBlob)Portada_video.jpg" controls class="embed-responsive-item">
                    <source src="@(ViewBag.PathBlob)FinderCar.mp4" type="video/mp4">
                    <source src="@(ViewBag.PathBlob)FinderCar.webm" type="video/webm">
                </video></div>
</div>
</div>
</div>

Como habrás notado, el path en donde tengo los ficheros de vídeo (el .mp4 y la conversión a .webm) los traigo desde el backend por medio del ViewBag.

¿A que parece todo muy sencillo? Pues no funciona.

El vídeo arrancaba y se detenía a los 3 segundos… o a los dos… o cuando le daba la gana.

Googleando llegue, como no, a Stack Overflow y solo tuve que meter esta configuración en el web.config para que -ahora si- todo fuera como la seda.

  <system.webServer>
    <staticContent>
      <remove fileExtension=".mp4" />
      <mimeMap fileExtension=".mp4" mimeType="video/mp4" />
      <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="7.00:00:00" />
    </staticContent>
  </system.webServer>

Y aún así me he quedado con las ganas de poner un player más bonito y sencillo, que el que finalmente he publicado.

Espero que sea útil.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s