Chrome non visualizza il video HTML5 finché la pagina non viene ridimensionata

Question

Sto tentando di creare un video di sfondo completo per un sito Web che sto sviluppando.

I miei tag video sono stati configurati correttamente e funziona perfettamente in Safari e Firefox, ma in Chrome ci sono dei problemi.

Quando premo la riproduzione in Chrome, l'audio inizia a essere riprodotto, ma non viene visualizzato alcun video. Il video viene visualizzato solo se ridimensiona la pagina o fai qualcos'altro visivo come selezionare il testo sulla pagina. Quindi la pagina mostra il video.

C'è una soluzione per questo o un modo per ingannare Chrome nel rendering correttamente del video? Non sembra essere un problema con i codec, dal momento che riproduce alla perfezione una volta ridimensionata la pagina (e le dimensioni della pagina non contano, puoi ridimensionarla alla dimensione originale e continuerà a essere riprodotta).

TestSite: www.mashwork.com/testsite

vedi codice:

#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

ho avuto lo stesso problema all'interno di Chrome. Ho aggiunto i controlli al video e ha risolto il problema.

ora nascondere i controlli una volta che il documento è pronto:

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