Medien einbinden mittels oEmbed

5 05 2012

Auf einer dynamischen Webseite das Einbinden von Object-Elementen zuzulassen birgt gewisse Risiken. Möchte man ein YouTube Video auf seiner eigenen Homepage anzeigen, präsentiert einem die Video-Plattform dazu den Code in Form eines Object-Elements bzw. neuerdings als Iframe an. Hiermit stehen die Tore für einen böswilligen Angriff weit offen, denn was genau da eingebunden wird lässt sich nur schwerlich automatisiert kontrollieren. Auf vielen Social Network Plattformen wird das Video automatisch angezeigt, sobald man lediglich die URL zur entsprechenden Seite einfügt. Doch wie funktioniert das?

Auch wenn die Nutzer dies nicht tun dürfen, kommt man nicht umhin, den Einbettungs-Code des entsprechenden Anbieters in seine Seite einzubinden. Doch wie kommt man da ran? Eine recht einfache Möglichkeit hierzu bietet oEmbed, das unter anderem von YouTube, Vimeo oder Soundcloud unterstützt wird. Über die API können wir auf die vom Anbieter zur Verfügung gestellten Informationen zugreifen. Verdeutlichen wir dies anhand eines Beispiels.

Wir möchten Big Buck Bunny von Vimeo auf unserer Seite einbinden. Hierzu benötigen wir zunächst die URL, unter der dieses Video eingebunden ist. Diese lautet http://vimeo.com/1084537. Praktischerweise finden wir auf oembed.com bereits eine Beschreibung für diesen Anbieter. Die Liste ist nicht vollständig, es kann sich also durchaus lohnen, in der jeweiligen Dokumentation nach dem Stichwort oEmbed zu suchen.

<?php

$vimeo = 'http://vimeo.com/api/oembed.xml?url=';
$video = 'http://vimeo.com/1084537';

// Zusammenbauen der URL
$url = $vimeo.urlencode($video);
// Holen der Informationen vom Anbieter. Wir nutzen das XML Format,
// meist wird aber auch JSON angeboten
$daten = @simplexml_load_file($url);
// Fehlerpruefung
if (preg_match('#^HTTP/... 4..#', $http_response_header[0])) die ('Kein Zugriff auf die Daten möglich: '.substr($http_response_header[0], 9));
// Ausgabe des Videos
echo $daten->html;

Das war es auch schon. In unserem Objekt haben wir alle Informationen zu dem Video, inklusive dem HTML Tag zur Einbindung. Hier die vollständige Ausgabe von $daten:

SimpleXMLElement Object
(
    [type] => video
    [version] => 1.0
    [provider_name] => Vimeo
    [provider_url] => http://vimeo.com/
    [title] => Big Buck Bunny
    [author_name] => Blender Foundation
    [author_url] => http://vimeo.com/user508904
    [is_plus] => 0
    [html] => < iframe src="http://player.vimeo.com/video/1084537" width="1280" height="720" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
    [width] => 1280
    [height] => 720
    [duration] => 596
    [description] => Big Buck Bunny tells the story of a giant rabbit with a heart bigger than himself. When one sunny day three rodents rudely harass him, something snaps... and the rabbit ain't no bunny anymore! In the typical cartoon tradition he prepares the nasty rodents a comical revenge.  Licensed under the Creative Commons Attribution license  http://www.bigbuckbunny.org
    [thumbnail_url] => http://b.vimeocdn.com/ts/209/636/20963649_1280.jpg
    [thumbnail_width] => 1280
    [thumbnail_height] => 720
    [video_id] => 1084537
)

Da einige Anbieter teilweise ihre Medien gegen das Einbinden auf fremden Webseiten schützen oder auch mal ein Medium gelöscht werden kann, müssen wir prüfen, ob beim Zugriff alles in Ordnung ist. Sollte dies nicht der Fall sein, erhalten wir im Response Header einen entsprechenden HTTP Status Code. Greifen wir auf ein geschütztes Medium zu, sähe der Inhalt von $http_response_header beispielsweise so aus:

Array
(
    [0] => HTTP/1.1 403 Forbidden
    [1] => Server: nginx
    [2] => Date: Sat, 05 May 2012 11:05:32 GMT
    [3] => Content-Type: text/html; charset=utf-8
    [4] => Connection: close
    [5] => Cache-Control: no-cache
    [6] => Access-Control-Allow-Methods: GET, PUT, POST, DELETE
    [7] => Access-Control-Allow-Headers: Accept, Authorization, Content-Type, Origin
    [8] => Access-Control-Allow-Origin: *
    [9] => X-Runtime: 36
    [10] => X-Cacheable: NO:Cache-Control=no-cache
    [11] => Content-Length: 1
    [12] => X-Varnish: 1789823721
    [13] => Age: 0
    [14] => Via: 1.1 varnish
    [15] => X-Cache: MISS
)

Die Nutzung ist nicht nur auf Videos beschränkt, sondern kann für weitere Multimedia-Formate wie Audio oder Bilder genutzt werden. Um beispielsweise den Player von SoundCloud einzubinden, müssen wir lediglich den Link abändern. Die Dokumentation liefert uns eine Beschreibung aller möglichen Parameter. Gekürztes Beispiel:

<?php

$soundcloud = 'http://soundcloud.com/oembed?format=xml&show_comments=false&url=';
$audio = 'http://soundcloud.com/beastieboys/sets/hot-sauce-committee-part-two';

$url = $soundcloud.urlencode($audio);
$daten = @simplexml_load_file($url);

echo $daten->html;

Die komplette Ausgabe:

SimpleXMLElement Object
(
    [version] => 1.0
    [type] => rich
    [provider-name] => SoundCloud
    [provider-url] => http://soundcloud.com
    [height] => 450
    [width] => 100%
    [title] => Hot Sauce Committee Part Two by Beastie Boys
    [description] => 2011 release, the long-awaited eighth album from the Hip Hop/Rock trio. Hot Sauce Committee Part Two was produced by Beastie Boys and mixed by Philippe Zdar. This album marks Mike "Mike D" Diamond, Adam "Ad Rock" Horovitz and Adam "MCA" Yauch's first full length effort since 2007's Grammy-winning all-instrumental The Mix-Up.
    [html] => <![CDATA[http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Fplaylists%2F737966&show_artwork=true]]>
)

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: