Verwendung der Klasse jquery-oembed-all

13 05 2012

Im Artikel „Medien einbinden mittels oEmbed“ hatte ich beschrieben, wie man mit PHP auf die oEmbed Daten von externen Anbietern zugreift. Nun macht das nur in eher wenigen Fällen Sinn, dies per PHP zu tun. Möchte man dynamisch die Daten beim Laden seiner Seite abgreifen, verzögert sich dies, bis der externe Dienst eine Antwort schickt. Steht dieser gerade nicht zur Verfügung oder hat Performanceprobleme, wirkt sich das konkret auf die Ladegeschwindigkeit der eigenen Seite aus. Nun könnte man die Daten auch einmalig abgreifen und in der eigenen Datenbank speichern. Was aber, wenn der Anbieter seinen Einbettungscode ändert?

Sinnvoller ist es, die eigene Seite zu laden und erst wenn diese angezeigt wird mittels JavaScript die externen Informationen im Nachhinein abzugreifen. Somit erübrigen sich die eben genannten Nachteile. Mit jquery-oembed-all existiert eine gute Klasse für jQuery, mit der sich genau dies bewerkstelligen lässt. Die Klasse ist ein Fork des in jüngster Vergangenheit vom Entwickler etwas stiefmütterlich behandelten  jquery-oembed, die im Gegensatz zum Original nicht auf den offensichtlich eingestellten Dienst oohembed angewiesen ist und, sollte oEmbed nicht zur Verfügung stehen alternative Methoden zur Einbindung nutzt.

Leider mangelt es jquery-oembed-all an einer Dokumentation, weshalb ich hier einen kurzen Überblick über die Funktionen geben möchte. Beginnen wir mit einem einfachen Beispiel. Dieses platziert das einzubindende Objekt in das Div „container“.

<html>
<head>
<!-- jQuery laden -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- die oembed-all Klasse laden -->
<script type="text/javascript" src="jquery.oembed.js"></script>
</head>

<body>
<script type="text/javascript">
// Platziere das Objekt aus .oembed im Element mit der id "container"
 $(document).ready(function() {
    $("#container").oembed("http://vimeo.com/1084537");
});
</script>
<!-- An dieser Position wird das Video angezeigt -->
<div id="container"></div>
</body>
</html>

Ergebnis:

Nun haben wir nicht nur ein Objekt zur Einbindung, sondern möchten neben dem Video noch ein Bild von Flickr anzeigen. Das zweite Beispiel platziert für jeden Link mit der Klasse „oembed“ das entsprechende Objekt.

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="jquery.oembed.js"></script>
</head>

<body>
<script type="text/javascript">
$(document).ready(function() {
 // Suche in jedem Element a mit der Klasse "oembed"
 $("a.oembed").oembed();
});
</script>
<div><a class="oembed" href="http://www.flickr.com/photos/kl/2423315026/">Flickr Bild</a></div>
<div><a class="oembed" href="http://vimeo.com/1084537">Vimeo Video</a></div>
</body>
</html>

Ergebnis:

Es können verschiedene Optionen angewendet werden.
autoplay (true / false): Soll ein Video automatisch gestartet werden?
maxWidth: Die maximale Breite für das Objekt
maxHeight: Die maximale Höhe für das Objekt
embedMethod: Wie soll das Objekt eingebunden werden?
– + append: Setze das Objekt unter den Link
– + fill: Ersetze den Link durch das Objekt, erhalte aber die Klasse
– + replace: Ersetze den Link und die Klasse durch das Objekt

Zur Veranschaulichung der Optionen folgt unser nächstes Beispiel. Es ist anzumerken, dass globale Optionen gesetzt werden können, die dann für jeden Dienst gelten, aber auch pro Dienst eigene Einstellungen möglich sind.

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="jquery.oembed.js"></script>
</head>

<body>
<script type="text/javascript">
    $(document).ready(function() {
    $(".oembed").oembed(null, {
        // Globale Optionen
        embedMethod: "append", // Haenge an
        maxWidth: 640, // Maximale Breite: 640 Pixel
        maxHeight: 480, // Maximale Hoehe: 480 Pixel
        vimeo: { // Diese Optionen gelten ausschliesslich fuer den Anbieter Vimeo
        	autoplay: true, 
        	maxWidth: 400, 
        	maxHeight: 400
        }
    });
});
</script>
<div><a class="oembed" href="http://www.flickr.com/photos/kl/2423315026/">Flickr Bild</a></div>
<div><a class="oembed" href="http://vimeo.com/1084537">Vimeo Video</a></div>
</body>
</html>

Das Video wurde auf die angegebene Maximalgröße verkleinert. Da die Einbettungsmethode „append“ verwendet wurde, werden die Objekte an die Links angehängt.

Mit der Methode „fill“ wird zwar der Link ersetzt, die Klasse .oembed bleibt allerdings erhalten. Die Klassen sind im Screenshot zur Verdeutlichung angezeigt.

„replace“ letztendlich ersetzt den kompletten Link inklusive seiner Klasse durch das einzubettende Objekt. Dies erkennt man am Besten im Vergleich der Klassen-Namen.

Advertisements

Aktionen

Information

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s




%d Bloggern gefällt das: