Ankündigung

Einklappen
Keine Ankündigung bisher.

html5 video browser support

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • strub
    hat ein Thema erstellt html5 video browser support.

    html5 video browser support

    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.

    Code:
    <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.

  • strub
    antwortet
    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

    Code:
    $(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>');
    	}
    });

    Einen Kommentar schreiben:


  • Geromel
    antwortet
    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)?

    Einen Kommentar schreiben:


  • Gast-Avatar
    Ein Gast antwortete
    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.

    Einen Kommentar schreiben:


  • strub
    antwortet
    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

    Einen Kommentar schreiben:


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

    Einen Kommentar schreiben:


  • Geromel
    antwortet
    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

    Einen Kommentar schreiben:


  • strub
    antwortet
    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.

    Einen Kommentar schreiben:


  • Geromel
    antwortet
    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.

    Einen Kommentar schreiben:


  • erc
    antwortet
    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.:

    PHP-Code:
    if(document.createElement('video').play) {
       
    //video supported

    Einen Kommentar schreiben:


  • strub
    antwortet
    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.

    Einen Kommentar schreiben:


  • Geromel
    antwortet
    ?? 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.

    Einen Kommentar schreiben:


  • strub
    antwortet
    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.

    Einen Kommentar schreiben:


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

    Einen Kommentar schreiben:

Lädt...
X