NOF-Forum  |  Referenzen  |  Kontakt  |  Impressum  |  Sitemap

NetObjects Fusion - Tutorials
NOF Tutorials und Hilfe von Thomas Frei-Herrmann
[Version 1.9] [Version 3.0] [Version 3.1] [Version 3.1 Text] [Version 3.1 Thumb] [Version 5.0] [Standard Ansicht] [Andere Ansichten] [Slideshow] [Video] [HTML5 Video]

Video LightBox - Videos in der Lighbox

hier Beispiele der Version 1.9 (Released 18. August 2010) von “Video LightBox.com”,
das Ihr hier downloaden könnt.

Bemerkung Januar 2017: Die Video LightBox scheint eingestellt zu sein. Zur Zeit kann man die freie Version noch hier downloaden: http://videolightbox.com/videolightbox.zip

Bitte guckte für neuere Versionen der Video LightBox auch hier.

Meine Erklärungen dazu weiter unten und hier könnt Ihr Euch noch mein Tutorial-Video angucken.

Man kann z.B. Videos, die auf dem eigenen Server liegen, einbauen (70% Lautstärke)

 

... oder auch auf solche von “YouTube” verlinken (100% Lautstärke)

 

... und hier mal ein kleiner Film von paby bezüglich teildynamischer Tabellen (50% Lautstärke)

paby - teildynamische Tabellen

 

Ansichten zum Erstellen von Videos der Video LightBox (60% Lautstärke)

Kurzanleitung Video LightBox

 

... die Videos, die Ihr von “YouTube” hier sehen könnt, sind also nichts weiter als ein Link zu “YouTube”, der in dem Lightbox-Fenster ausgeführt wird.

Hier mal ein Video “PANAMERICANO” als direkt eingebetteter Link. Den Code zum “Einbetten” findet Ihr auf jeder “YouTube” Seite neben dem Video. Hier habe ich diesen Code lediglich in die HTML eines Textfeldes “vor dem Tag” (NOF 11 “vorher”) eingefügt und fertig. Guckt hierzu auch bei Strunz aus dem NOF-Forum.

 

 

Neu in Version 1.9:

  1. Detail-Ansicht der Video-Informationen
  2. Voreinstellung der Lautstärke beim Start möglich
  3. Für User, die nicht NOF nutzen - eine automatische Einfügung der Codes in HTML Seite

Dieses kleine Programm erklärt sich eigentlich vollkommen von alleine. Hier mal eine Ansicht davon.

Ihr fügt eben oben Eure eigenen Videos ein oder z.B. auch welche von “YouTube”. Dann wählt Ihr die Thumbnails, die Lightbox in der das Video angezeigt werden soll und publiziert das lokal in irgendeinen Ordner.

Das Programm generiert nun alle Ordner und Dateien, die benötigt werden in diesen Ordner hinein.

Das sind:

1) Datei index.html (aufzurufende Startseite, auch zum Testen gut zu verwenden)
2) Ordner data (Ordner mit Thumbnails und Videos)
3) Ordner engine (Ordner mit den Skripten der Lightbox und dem Player)

Nun kopiert Ihr lediglich die beiden Ordner data und engine in den Ordner Eurer Lokalen Publizierung und mittels FTP-Programm natürlich auch auf den Server, in dem sich auch die Seite befindet auf der Ihr das alles einbauen wollt, also normalerweise ist das dann der Ordner html.

Nun öffnet Ihr mit Eurem “Windows-Editor” die vom Programm generierte Datei

index.html

und kopiert die dort markierte “HEAD section” in die HTML Eures Layouts, also:

> Auf das Layout klicken > Fenster “Layout-Eigenschaften” > Button “HTML” klicken
> “Zwischen Head Tags” den Code einfügen, der bei mir z.B. so aussieht:

<!-- Start VideoLightBox.com HEAD section -->

<link rel="stylesheet" href="engine/css/videolightbox.css" type="text/css" />

<style type="text/css">#videogallery a#videolb{display:none}</style>

<link rel="stylesheet" type="text/css" href="engine/css/overlay-minimal.css"/>
<script src="engine/js/jquery.tools.min.js"></script>
<script src="engine/js/swfobject.js"></script>

<!-- make all links with the 'rel' attribute open overlays -->
<script src="engine/js/videolightbox.js"></script>

<!-- End VideoLightBox.com HEAD section -->

... und für die eigentlichen Videos die dort markierte “BODY section” in die HTML eines Textfeldes.

Ihr zieht ein Textfeld auf, demarkiert es und markiert es anschließend durch einfachen Klick.

> Fenster “Text-Eigenschaften” > Button “HTML” > “Vor dem Tag” einfügen, der sieht bei mir hier für die eigenen Fotos z.B. so aus:

<div align="center">

   <!-- Start VideoLightBox.com BODY section -->

   <script type="text/javascript">
      function onYouTubePlayerReady(playerId)
      {
         ytplayer = document.getElementById("video_overlay");ytplayer.setVolume(100);
      }
   </script>

   <div id="videogallery">

      <a rel="#voverlay" href="engine/swf/player.swf?url=../../data/video/fallschirm.flv&volume=70" title="Fallschirm"><img
      src="data/thumbnails/fallschirm.png" alt="Fallschirm" /><span></span></a>

      <a rel="#voverlay" href="engine/swf/player.swf?url=../../data/video/deo.flv&volume=70" title="Deo"><img src="data/thumbnails/deo.png"
      alt="Deo"/><span></span></a>

      <a rel="#voverlay" href="engine/swf/player.swf?url=../../data/video/fedex.flv&volume=70" title="Fedex"><img src="data/thumbnails/fedex.png"
      alt="Fedex" /><span></span></a>

      <a rel="#voverlay" href="engine/swf/player.swf?url=../../data/video/katzenjammer.flv&volume=70" title="Katzenjammer"><img
      src="data/thumbnails/katzenjammer.png" alt="Katzenjammer" /><span></span></a>

      <a id="videolb" href="http://videolightbox.com">HTML Video by VideoLightBox.com v1.9</a>

   </div>

   <!-- End VideoLightBox.com BODY section -->

</div>

ACHTUNG:

Bitte verwendet hier einen erweiterten DOCTYPE im “Head-Bereich” Eurer Seite, da bei der freien Version das “VideoLightBox” Wasserzeichen (oben rechts) im Internet Explorer nicht korrekt angezeigt wird.

Wie man das macht, erkläre ich hier.

nach oben

Viel Erfolg!

zurück

 

Tutorials von Thomas Frei-Herrmann

diese Seite weiter empfehlen


Counter Statistik