Chrome не отображает видео HTML5, пока размер страницы не изменится.

Question

Я пытаюсь создать полное фоновое видео для разрабатываемого веб-сайта.

У меня все видео-теги настроены правильно, и они отлично работают в Safari и Firefox, но в Chrome есть проблемы.

Когда я нажимаю кнопку воспроизведения в Chrome, звук начинает воспроизводиться, но видео не появляется. Видео появляется только в том случае, если вы изменили размер страницы или сделали что-то еще визуальное, например, выделение текста на странице. Затем на странице отображается видео.

Есть ли исправление для этого или какой-то способ обмануть Chrome в правильном рендеринге видео? Похоже, это не проблема кодека, так как он воспроизводится просто отлично, когда вы изменяете размер страницы (и размер страницы не имеет значения, вы можете изменить его размер до исходного размера, и он продолжит воспроизведение).

Testsite: www.mashwork.com / testsite

См. Код:

#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

У меня была такая же проблема в Chrome.Я добавил элементы управления к видео, и это устранило проблему.

Теперь я скрываю элементы управления, когда документ готов:

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