Video mit Hintergrundbild flackert beim Laden der Seite

Question

Ich versuche, ein Banner zu machen, das ein Video mit einer Überschrift zeigen soll. Bei Browsern, die das Video-Tag oder die bereitgestellte Videoquelle nicht unterstützen, sollte das Banner stattdessen auf ein Hintergrundbild zurückgreifen. Meine aktuelle Lösung ist dies:

HTML

<div class="container"> 
    <video autoplay muted loop preload="none" class="video" style="background-image: url(http://source.to/background-image.jpg);"> 
    <source src="http://source.to/video.mp4"> 
    </video> 

    <h1 class="title"> 
    This is the banner title 
    </h1> 
</div> 

CSS

.container { 
    height: 500px; 
    overflow: hidden; 
    position: relative; 
} 

.video { 
    height: auto; 
    width: 100%; 
    background-repeat: no-repeat; 
    background-size: cover; 
} 

.title{ 
    position: absolute; 
    top: 200px; 
    width: 100%; 
    text-align: center; 
    color: white; 
} 

jsfiddle (getestet in Chrome).

Das Problem, wie in der Jfiddle zu sehen ist, ist, dass das Hintergrundbild kurz angezeigt wird, während das Video geladen wird. Eine mögliche Umgehung wäre es, den ersten Frame des Videos als Hintergrundbild zu verwenden, aber das würde das Banner weniger flexibel machen und höhere Anforderungen an die Videoproduktion stellen. Ich habe auch über die Verwendung der Feature-Erkennung Modernizr nachgedacht, aber es scheint in dieser Hinsicht sehr unzuverlässig zu sein.

Gibt es irgendwelche Möglichkeiten, dieses Problem zu lösen?

Answer 1

Anstatt einen Hintergrundstil als Fallback zu verwenden, könnten Sie einfach den Fallback als img unter die Videoquelle stellen (in Chrom getestet).

Ich habe deine Geige aktualisiert, um das neue Verhalten zu demonstrieren.

Fiddle: https://jsfiddle.net/v9u657wb/4/

Neue HTML-Code einfach (css unverändert):

<div class="container"> 
<video autoplay muted loop preload="none" class="video"> 
    <source src="http://techslides.com/demos/sample-videos/small.mp4"> 
    <img src="http://www.votingmonkey.com/res/fb_users/136test-banner-2.jpg"> 
</video> 

<h1 class="title"> 
    This is the banner title 
</h1>