gelöscht

[Deleted member 33067]

gelöscht

 

[Resteverwerter]

Probier mal ob es mit <video controls poster="bla.gif"> besser geht.

http://wiki.selfhtml.org/wiki/Video#Vorschaubild_anzeigen

 

[Sempervivum]

Probier mal ob es mit <video controls poster="bla.gif"> besser geht.

Fürchte, das wird dem TO nicht helfen, denn er will das Bild ja gerade anzeigen, wenn der Browser HTML5 und damit das video-Tag nicht unterstützt.
Wundert mich sehr, dass er das Bild lädt, obwohl es gar nicht angezeigt wird. Man könnte es u. U. mit Javascript resp. jQuery lösen: Nur wenn das video-Tag nicht existiert, das Bild anzeigen.

 

[Sempervivum]

<video>
<source src="datei.webm" type="video/webm">
<source src="datei.mp4" type="video/mp4">
<img class="novideo" data-src="datei.gif" alt="datei" src="dummy.gif">
</video>

$(document).ready(function() {
    if (!$('video').length) $('.novideo').attr('src', $(this).attr('data-src');
});

Als dummy.gif immer dasselbe, winzige, transparente GIF verwenden.

 

[Sempervivum]

Oder dieses müsste auch funktionieren:

$(document).ready(function() {
    $('video').each(function() {$(this).children('img').remove()});
});

ohne Änderungen am img-Tag.

 

[Tronjer]

Selber hatte ich den Fall noch nicht, aber ich würde es mit einem Workaround versuchen.

1. Schritt: Abfrage, ob der Browser Videos abspielen kann. Dazu ließe sich die Methode canPlayType() einsetzen, ergänzt um eine UA-Abfrage für den IE 7/8. Auch Modernizr sollte eine entsprechende Klasse erzeugen.

2. Schritt: anstatt ein <img> als Fallback zu verwenden, nimmt man einen leeren Container, der als Default-Zustand ein display:none erhält. Falls der Browser keine Videos abspielen kann, wird dort per JS eine CSS-Klasse angehängt, die width, height und das gewünschte Bild als background-image setzt.