html5 video browser support

[strub]

Hallo

Ich bin gerade daran ein Video in meine Website zu integrieren. Dazu möchte ich gerne das "neue" Video tag benutzen. Klappt ja alles wunderbar bis natürlich auf die alten Browser welche dieses nicht unterstützen.

Nun mein Ziel ist es wenn das Video tag nicht unterstützt einfach ein Bild anzuzeigen.

Jetzt habe ich mich mal schlau gemacht wie man es herausfinden kann mitels Javascript ob das Video tag unterstützt wird. Nun kam mir da aber noch die eine Idee in den Sinn.

Ich habe nämlich herausgefunden das z.B bei alten IE Browsern die Video Höhe gleich 0 ist. Dann dachte ich mache ich eine Abfrage ob das Video eine mindestes Höhe besitzt, wenn nicht wird das video nicht unterstützt.

<script>
$(document).ready(function() {
	if ($('video').height() > 20) {
		alert('video supported');
	} else {
		alert('not supported - add image');
	}
});
</script>

Was meint Ihr dazu. Ist das eine schlechte Idee? Besten Dank im voraus.

[Geromel]

schau dir mal modernizr.js an, das sollte können was du suchst.

[strub]

Ja danke für den Tip. Ich möchte aber auf solche Scripts verzichten aus verschiedenen Gründen. Scheint aber tatsächlich soweit in allen Browsern zu funktionieren.

[Geromel]

?? das verstehe wer will. grad fürs downgraden kann man dieses "Script" wunderbar nutzen, weil je nach Können des Browsers klassen gesetzt werden, mit denen man dann im CSS arbeiten kann bzw. auch im JQuery.

[strub]

Ja hoffe mache jetzt niemand Böse, aber mann schaut sicht heute mal viele Webseiten an, in manchen werden bis zu 20 Javascripts Dateien geladen und wundert sich dann wieso die Seite so langsam lädt. Natürlich benutze ich auch Jquery aber ansonsten, möchte ich eben nur noch mein eigenes JS File welches genau das macht was es muss und nicht mehr. Es macht doch keinen Sinn für jedes einzelne Vorhaben ein Script einzufügen.

[erc]

Die Höhe ist recht allgemein, da würde ich etwas spezifischeres nehmen. Siehe http://www.w3schools.com/tags/ref_av_dom.asp

Also z.B.:

if(document.createElement('video').play) {
   //video supported
} 

[Geromel]

strub dazu gibts auch JavaScript-Lösungen. Mir fällt spontan head.js ein oder so. Willst du eine optisch ansprechende Seite, die mit allen Browsern voll funktionsfähig sein soll, bzw. dann entsprechende Fehlermeldungen rausrückt, kommst du nicht drumrum mehr als jquery zu nutzen. Wie gesagt, macht man es clever, hat man auch keine 123213 requests für js-files.

[strub]

Hey danke erc für den Code Schnipsel. Werde ich mir gleich mal anschauen.

@Geromel:
Ja wen man schon viele Scripts benötigt muss man es wirklick clever machen. Ich versuche es eben auf meine eigene Methode. Und bis jetzt bin ich da sehr gut gefahren.

[Geromel]

ich mein ja nur. grad bei solchen problemen von dir, kann man gut mit eine feature detection arbeiten teilweise kann man dann einfache weichen bauen, damit eventuell auch der IE8 dieses Video abspielen kann und nicht nur eine Fehlermeldung kommt

[tr0y]

http://diveintohtml5.info/detect.html#video-formats

[strub]

ich mein ja nur. grad bei solchen problemen von dir, kann man gut mit eine feature detection arbeiten teilweise kann man dann einfache weichen bauen, damit eventuell auch der IE8 dieses Video abspielen kann und nicht nur eine Fehlermeldung kommt

Ja das versuche ich ja umzusetzen.

Danke für den Link tr0y denn habe ich schon vorher besucht

[Gast]

ich dachte man hat für den alten ie und solche browser einen flash-fallback;
zum viedeo aspielen fällrt mir sponatn video.js ein:
die kämpfen mit allem möglichen support:
https://github.com/videojs/video.js/issues/539
da kann man sich das fallback oder so mal anschauen.

//OT:
mehre js einbinden, ich hab mich da auch vor gescheut, aber es macht sinn.
und dann alles zu packen und eine datei zu haben; wenn mein grunt so läuft wie ich es will poste ich mal, was ich wie gemacht habe.

[Geromel]

und wieso willst du es dann selber machen, wenn es doch schon praktikable Lösungen gibt, die genau das machen und vermutlich besser sind als das was du am Ende zusammengetippt hast (nicht zu vergessen, nachdem du viele stunden und nerven investiert hast)?

[strub]

und wieso willst du es dann selber machen, wenn es doch schon praktikable Lösungen gibt, die genau das machen und vermutlich besser sind als das was du am Ende zusammengetippt hast (nicht zu vergessen, nachdem du viele stunden und nerven investiert hast)?

Ich lerne einfach immer viel dazu wenn ich es selber mache und verstehe auch das Prinzip dahinter.


Es geht bei mir nur um ein Video auf der Startseite, mehr nicht. Darum ist meine Lösung wenn man mehrere Videos einbinden möchte natürlich nicht geeignet.

Aber hier mal mein Code (natürlich fehlen im Code noch andere Video Formate):

Mit abgeschaltenem Javascript kommt dann natürlich nur die Bilder Gallerie

$(document).ready(function() {
	if(document.createElement('video').play) {
		$('#image-gallery1').html('<video class="video" poster="example.jpg" loop="" muted="" autoplay><source type="video/mp4" src="Example.mp4"></video>');
	}
});