Tag Archiv: Thumbnails

Mai200930

Oliver Storm

1

jYouTube – jQuery YouTube thumbnail plugin

Videos in Webseiten werden immer beliebter. Und gerade das einbetten von YouTube-Videos nimmt stetig zu.

Wer jedoch nicht direkt ein Video einbinden will, sondern z.B. nur ein YouTube-Video über ein Bild verlinken will, oder z.B. bei klick auf ein Thumbnail ein Video in einer Lightbox öffnen will, der musste bisher das Video aufrufen, einen Screenshot machen, diesen anpassen und einbinden.
Ziemlich aufwendig. Nicht wahr?

Genau hier setzt das jQuery-Plugin jYouTube an. Mit diesem Plugin habt ihr die Möglichkeit mit nur einem Aufruf autoamtisch einen Screenshot/Thumbnail des Videos zu erstellen.
Das ganze geht in verschiedenen Größen und über die ID oder die URL des Videos.

?View Code JAVASCRIPT
1
2
3
4
5

// Returns big screenshot by video id
$.jYoutube('rSUfWXcNAOw');
 
// Returns small thumbnail by YouTube video URL
$.jYoutube('http://www.youtube.com/watch?v=rSUfWXcNAOw', 'small');

Alle Infos rund um das Plugin findet Ihr auf der offiziellen jQuery-Seite dazu.

Apr200922

Stefan Huissel

0

Online Thumbnail Generator für Webseiten

Unabhängig von alles JS-Frameworks will ich mal einen kleinen Service vorstellen, mit dem man sehr einfach Thumbails von Websites darstellen kann.
Alles was man dafür benötigt ist ein Account auf Pageglimpse. Nach erfolgreicher Registrierung gibt man auf seiner Seite dem img-Tag als src Attribut einfach einen absoluten Link. Dieser kann dann wie folgt aussehen:

http://images.pageglimpse.com/v1/thumbnails?url=http://www.mysrc.de/&size=large&devkey=1234567890

mysrc_thumb

Pageglimpse verfügt auch über eine kleine API. Was indem Fall nur bedeutet, dass dem GET-String einfach weitere Attribute hinzugefügt werden können.
Dazu gehören:

  • devkey -> obligatorisch und auch üblich um einen Service im Web zu nutzen
  • url -> WWW-Adresse die der Website die als Thumbnail angezeigt werden soll
  • size -> Größe des Thumbails

Da die Thumbnails nicht sofort generiert werden, kann man einen Request senden um den Status zu prüfen. Ein Request sähe dann so aus:

http://images.pageglimpse.com/v1/thumbnails/request?

Hinter “request?” kann man dann noch die GET-Parameter anhängen. Beispiele dazu findet ihr auf Pageglimpse API.