Chrome no muestra video HTML5 hasta que la página cambie de tamaño

Question

Estoy intentando crear un video de fondo completo para un sitio web que estoy desarrollando.

Tengo mis etiquetas de video configuradas correctamente, y se reproduce muy bien en Safari y Firefox, pero en Chrome hay problemas.

Cuando pulso reproducir en Chrome, el audio comienza a reproducirse, pero no aparece el video. El video solo aparece si cambia el tamaño de la página o hace algo más visual, como seleccionar texto en la página. Luego la página muestra el video.

¿Hay una solución para esto, o alguna forma de engañar a Chrome para que represente el video? No parece ser un problema de códec, ya que funciona bien una vez que cambia el tamaño de la página (y el tamaño de la página no importa, puede cambiar su tamaño al tamaño original y seguirá reproduciéndose).

TestSite: Código www.mashwork.com/testsite

Ver:

#mashvid { 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: auto; 
    min-width: 100%; 
    z-index: -5; 
} 

<video preload id="mashvid" poster="images/mashvid_poster.png"> 
     <source src="http://www.mashwork.com/testsite/video/mashwork1080.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> 
     <source src="http://www.mashwork.com/testsite/video/mashwork1080.ogv" type='video/ogg; codecs="theora, vorbis"'> 
     <source src="http://www.mashwork.com/testsite/video/mashwork1080.webm" type='video/webm; codecs="vp8, vorbis"'> 
     Your browser does not support the video tag. 
</video> 

Answer 1

Yo tenía el mismo problema dentro de cromo. Agregué controles al video y solucionó el problema.

ahora ocultar los controles una vez que el documento está listo:

$(document).ready(function() { 
    var video = document.getElementById("video"); 
    video.removeAttr("controls"); 
});