Site mit Videos selbst gemacht

Teil 2: Youtube-Widgets: So platzieren Sie Youtube-Videos auf ihrer Website

  1. Youtube-Widgets: So platzieren Sie Youtube-Videos auf ihrer Website
  2. Teil 2: Youtube-Widgets: So platzieren Sie Youtube-Videos auf ihrer Website
  3. Video Bars auf der Webseite

Google AJAX Search API

Das Video Bar Widget basiert auf der Google AJAX Search API. Diese stellt unter anderem JavaScript-Code und Style Sheets für die Video Bar zur Verfügung. Die entsprechenden Dateien binden Sie wie folgt ein:

<script src="www.google.com/uds/
api?file=uds.js&v=1.0"
type="text/javascript"></script><link href="www.google.com/uds/css/
gsearch.css"
rel="stylesheet" type="text/css"/><script src="www.google.com/uds/solutions/
videobar/gsvideobar.js"
type="text/javascript"></script><link href="www.google.com/uds/solutions/
videobar/gsvideobar.css"
rel="stylesheet" type="text/css"/>

Der Video Bar Wizard bindet die CSS-Dateien per Import-Anweisung ein, was aber für das Ergebnis keinen Unterschied macht. Den Abstand zu den Rändern legen Sie mit einem eigenen Style Sheet fest. Ansonsten erscheint das Video Bar-Steuerelement mittig auf der Seite. Die Video Bar selbst erzeugen Sie in der Funktion LoadVideoBar.

Den Code dieser Funktion führt schließlich die Anweisung GSearch.setOnLoadCallback(LoadVideoBar); aus. Das Verfahren zeigt ein Codefragment aus dem einfachen Beispiel videobar1.htm (Heft-DVD):

function LoadVideoBar(){
var vbr; var options = {
largeResultSet : true }
vbr = new GSvideoBar (document.
getElementById("videoBar"),
GSvideoBar.PLAYER_ROOT_FLOATING,
options);....

Sie können den Code für Ihr eigenes Style Sheet sowie den JavaScript-Code ohne Weiteres im Head-Bereich Ihrer Webseite platzieren. Dies bietet sich im Sinne einer besseren Übersicht sogar an. Gewöhnlich möchte man im Body der Seite ja noch andere Inhalte bereitstellen.

Beachten Sie aber bitte, dass Sie die ID verwenden, die Sie als Parameter für die Methode getElementById definiert haben - im Beispiel videoBar -, wenn Sie im Body auf die Video Bar verweisen (

... , der Codegenerator vergibt die ID video- Bar-bar).

Video Bar-Control und Player

Mit dem Parameter options, den Sie dem Konstruktor beim Erzeugen des Video Bar-Objekts als drittes Argument übergeben, konfigurieren Sie das Aussehen des Controls. Beispielsweise richten Sie die Videoleiste mit der Einstellung horizontal : true horizontal aus. Standardmäßig ist das Steuerelement vertikal ausgerichtet, was dem Wert false entspricht. Indem Sie das Attribut largeResultSet auf false setzen, verringern Sie die Anzahl der Thumbnails. Mehrere Attribute geben Sie durch Komma getrennt an.

options = {
largeResultSet : false,
horizontal : true,
thumbnailSize : GSvideoBar.THUMBNAILS_
SMALL,
string_allDone : "Video beenden"
}

Die Video Bar unterstützt zwei Größen von Thumbnails, medium und small. Die letztere stellen Sie mit dem Wert GSvideoBar. THUMBNAILS_SMALL für das Attribut thumbnailSize ein (thumbnailSize : GSvideo- Bar.THUMBNAILS_SMALL). Der Default-Wert ist medium (thumbnailSize : GSvideoBar. THUMBNAILS_MEDIUM). Die Konstante GSvideoBar.PLAYER_ ROOT_FLOATINGals zweiter Parameter des Konstruktors bewirkt, dass zum Abspielen eines Videos auf der Seite automatisch ein Player in der Nähe der Video Bar erscheint.

Ihre Besucher können den Player über die Verknüpfung Video fertig angesehen wieder ausblenden. Den Text dieser Verknüpfung ändern Sie gegebenenfalls mit der Eigenschaft string_allDone. Weisen Sie dieser einfach den gewünschten Text als Wert zu wie string_allDone : "Video beenden".

Youtube-Widgets

© Archiv

Mit dem Wizard erzeugtes Video Bar-Control: Der Player erscheint, wenn ein Besucher in der Video Bar auf die Miniaturansicht eines Videos klickt.

Die Ausmaße des Video-Players sind in dem Style Sheet .playerInnerBox_gsvb.player_gsvb in der eingebundenen Datei gsvideobar.css mit 260 Pixel für die Breite und 195 Pixel für die Höhe festgelegt. Wenn Sie wollen, überschreiben Sie diese Werte in einem selbstdefinierten Style Sheet, wobei eine Aspect Ratio von 1,33 optimal ist. Google gibt unter diesem Gesichtspunkt folgende Kombinationen an:

folgende Kombinationen

  • small: 80 x 135 Pixel
  • medium: 260 x 95 Pixel
  • large 320 x 260 Pixel
  • extra large: 480 x 380 Pixel

Mehr zum Thema

HTML 5
Webgestaltung

Google Web Designer ist spezialisiert auf HTML5. Ein Vorteil dieses Standards ist das einfache Einbinden von Videos mit dem Element video. Wir zeigen…
Wir verraten, wie Sie Fritzboxen und andere Router vor Hackern schützen.
Fritzbox, Asus, Belkin und Co.

Fritzbox, Asus, Belkin oder DLink - die Liste der geknackten Router ist lang. Hacker stahlen Passwörter oder NAS-Daten. So machen Sie Ihren Router…
Wir führen Sie zur eigenen Windows-App - unserem PC-Magazin-RSS-Feed.
C# und XAML

Wir zeigen, wie Sie Windows 8.1 Apps selbst programmieren können. Lernen Sie das App erstellen an Hand unseres Beispiels: dem RSS-Feed von PC…
Windows Tipps & Tricks: Benutzerrechte unter Windows 8.1
Programme richtig installieren

Wir zeigen Ihnen, wie Sie sich unter Windows 8.1 alle Benutzerrechte verschaffen und Programme richtig installieren.
Windows 8: Starbildschirm
Microsoft Project Siena

Erstellen Sie sich selbst eine App für Windows 8, die auf alle Funktionen Ihres Tablets zugreifen kann, inklusive Kamera, Mikrofon und Lautsprecher.…