Chrome nie wyświetla wideo HTML5, dopóki rozmiar strony nie zostanie zmieniony.

Question

Próbuję utworzyć pełne tło wideo dla witryny, którą tworzę.

Mam wszystkie tagi wideo wszystkie poprawnie skonfigurowane i gra świetnie w Safari i Firefox, ale w Chrome występują problemy.

Po uruchomieniu odtwarzania w Chrome zaczyna się odtwarzanie dźwięku, ale nie pojawia się żaden film wideo. Wideo pojawia się tylko wtedy, gdy zmieniasz rozmiar strony lub robisz coś wizualnego, na przykład wybierając tekst na stronie. Następnie strona wyświetla wideo.

Czy jest na to poprawka, lub w jakiś sposób oszukać Chrome w poprawnym renderowaniu wideo? Wydaje się, że nie jest to kodek, ponieważ gra się dobrze po zmianie rozmiaru strony (i rozmiar strony nie ma znaczenia, możesz zmienić rozmiar z powrotem do oryginalnego rozmiaru i będzie on nadal odtwarzany).

TestSite: www.mashwork.com/testsite

See code:

#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

Miałem ten sam problem w Chrome. Dodałem do tego kontrolę i naprawiłem problem.

teraz ukryć elementy sterujące, gdy doc jest gotowe:

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