NOF-Forum  |  Referenzen  |  Kontakt  |  Impressum  |  Sitemap

NetObjects Fusion - Tutorials
NOF Tutorials und Hilfe von Thomas Frei-Herrmann

Flash Player Beispiel (Erklärungen unten) und hier mein Beispiel als MP3-Player.

guckt Euch hierzu auch mal das Video von Zappelo an und für die super einfache “Video LightBox” hier.

Oft besteht der Wunsch ein Video (z.B. von einem Urlaubsfilm) auf die Web-Site zu stellen.

Hier einige Beispiele, oder Ihr könnt so ein Video z.B. auch in der “Fancy Box” abspielen lassen
oder Eure “YouTube” Videos eben auch in der “Video Lightbox”.

Wie ich das mit dem Fernseher gemacht habe, könnt Ihr hier lesen oder hier als “großes Kino

“Filme: Marienkäfer, Fallschirm, Verschollen, Gassi gehen und Kätzchen”
zum Stoppen der Filme 2-4 auf das kleine Kreuz unten rechts klicken
oder rechte Maustaste auf Video und “Abspielen” ab- oder anhaken

Stop

Filme ...

1. Marienkäfer
FLV

2. Fallschirm
SWF

3. Verschollen
SWF

4. Gassi gehen
SWF

5. Kätzchen
FLV


Das habe ich so gemacht:



Bitte ladet Euch zunächst dieses kostenlose Programm hier herunter:

http://www.dvdvideosoft.com/products/dvd/Free-Video-to-Flash-Converter.htm

Hier einige Bilder von diesem Programm. Unten das Start-Menü mit allen angebotenen Programmen des “Free Studio Managers”. Hier wählt Ihr “DVD & Video” und dann “Free Video to Flash Converter

Meine Beschreibung bezieht sich auf Version 4.7.18 (vom Dezember 2010) zu einer .flv Datei.

Jetzt konvertiert Ihr Eure Video-Datei mit diesem Player in z.B. eine .flv Datei
(bitte keine Umlaute, Sonderzeichen oder Leerzeichen für den Namen verwenden) oder eben,
wie im Fernseher oben verwendet, in eine .swf Datei. Bitte achtet darauf alle Dateinamen klein zu schreiben und auch in den Codes klein geschrieben anzugeben. Unix-Rechner machen da eine Unterschied.

Ihr erhaltet 4 Dateien, die Ihr benötigt:

1) player_flv_classic.swf (eines der vielen angebotenen Player-Designs)
2) eure_video_datei.flv (konvertierte Video-Datei, bitte auf Kleinschreibung achten)
3) EureVideoDatei.xml (xml-Textdaten-Datei, die bearbeitet werden kann)
4) start_frame.jpg (hier der schwarze Hintergrund des Players)


... sowie den Code, den Ihr in Eure Seite einfügen müsst in der Datei (Bild unten):

HowToUseFlash_Example.htm

Jetzt müsst Ihr folgendes tun:

Ihr kopiert Ihr mittels FTP-Programm diese vier Dateien in den Ordner, wo sich auch Eure HTML-Seite mit dem eingefügten Code befindet
(meist ist dies der Ordner: “HTML”). Vorher könntet Ihr noch die .xml Datei Euren Bedürfnissen anpassen (siehe weiter unten).

Wenn Ihr das auch bei der lokalen Publizierung sehen wollt, müsst Ihr diese vier Dateien ebenfalls in den Ordner “HTML” der “Lokalen Publizierung” kopieren.

Den von dem Generator erzeugten Code fügt Ihr so ein (siehe Bilder unten):

> Zieht ein Textfeld auf (Bild unten)
> Demarkiert es und klickt anschließend 1 x auf das Textfeld, damit es markiert ist
> Jetzt klickt im Fenster “Text-Eigenschaften” auf den Button “HTML
> Fügt den Code “Vor dem Tag” ein (siehe Bild unten)

... und noch was.

Wenn Ihr (wie ich hier in meinem Beispiel) 2 Player (oder mehr) Player hier auf der Seite haben wollt, müsst Ihr folgendes tun:

Generiert mit dem Programm das nächste Video und zieht ein neues Textfeld auf,
in das Ihr dann den neuen Code kopiert.

Ihr könnt auch noch die “EureVideoDatei.xml” Datei mittels Windows-Editor öffen und entsprechend Euren Wünschen anpassen, für z.B. einen
automatischen Start (“autoplay” value = “1” stellen),
wiederholen (“loop” value = “1” stellen),
andere Farben, etc., etc...

Wenn Ihr Euer eigenes “Startbild” haben wollt (so wie ich hier), müsst Ihr dieses eben erstellen und anstelle von “start_image.jpg”:

<param name="startimage" value="EuerFoto.jpg" />

dort eintragen und natürlich auch wieder jeweils in den Ordner “HTML” der lokalen Publizierung und auf den Server kopieren.

Diese Datei sieht so aus:

<?xml version="1.0" encoding="UTF-8"?>
<config>
<param name="flv" value="marienkaefer-peugeot.flv" />
<param name="width" value="240" />
<param name="height" value="180" />
<param name="autoplay" value="0" />
<param name="autoload" value="0" />
<param name="buffer" value="5" />
<param name="buffermessage" value="Buffering _n_" />
<param name="buffercolor" value="ffffff" />
<param name="bufferbgcolor" value="3d60a5" />
<param name="buffershowbg" value="1" />
<param name="title" value="Marienkäfer" />
<param name="titlesize" value="20" />
<param name="titlecolor" value="ffffff" />
<param name="margin" value="0" />
<param name="srt" value="0" />
<param name="srtcolor" value="ffffff" />
<param name="srtbgcolor" value="3d60a5" />
<param name="srtsize" value="11" />
<param name="showstop" value="1" />
<param name="showvolume" value="1" />
<param name="showtime" value="1" />
<param name="showplayer" value="autohide" />
<param name="showloading" value="autohide" />
<param name="showfullscreen" value="1" />
<param name="showswitchsubtitles" value="0" />
<param name="showmouse" value="autohide" />
<param name="loop" value="0" />
<param name="startimage" value="marienkaefer.jpg" />
<param name="playercolor" value="3d60a5" />
<param name="loadingcolor" value="bbbbbb" />
<param name="bgcolor" value="3d60a5" />
<param name="bgcolor1" value="3a5b9e" />
<param name="bgcolor2" value="3d60a5" />
<param name="buttoncolor" value="ffffff" />
<param name="buttonovercolor" value="dbdbdb" />
<param name="slidercolor1" value="ffffff" />
<param name="slidercolor2" value="bbbbbb" />
<param name="sliderovercolor" value="dbdbdb" />
<param name="loadonstop" value="0" />
<param name="onclick" value="playpause" />
<param name="onclicktarget" value="_blank" />
<param name="ondoubleclick" value="fullscreen" />
<param name="ondoubleclicktarget" value="_blank" />
<param name="playertimeout" value="1500" />
<param name="videobgcolor" value="000000" />
<param name="volume" value="100" />
<param name="shortcut" value="1" />
<param name="playeralpha" value="100" />
<param name="phpstream" value="0" />
<param name="srturl" value="video.srt" />
<param name="top1" value="0" />
<param name="showiconplay" value="1" />
<param name="iconplaycolor" value="ffffff" />
<param name="iconplaybgcolor" value="dddddd" />
<param name="iconplaybgalpha" value="25" />
<param name="showtitleandstartimage" value="0" />
</config>

... übrigens, im Fernseher oben (ist ein Hintergrund-Bild auf einem extra Layout), habe ich bei dem 2.,3. und 4. Film .swf Dateien in einem “Inline Frame” verwendet.
Bei dem 1. und 5. Film dagegen eine .flv Datei.

Wie ich das mit dem Fernseher gemacht habe, könnt Ihr hier lesen.

Der Code für z.B. das Video “Fallschirm” sieht dann bei meiner .swf Datei z.B. so aus:
(meine Änderungen habe ich mal fett markiert)

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
 codebase="http://fpdownload.macromedia.com/pub/shockwave/
cabs/flash/swflash.cab#version=7,0,0,0"
width="320" height="240"
id="player" align="middle">
<param name="movie"
value="vw_fallschirm.swf"/>
<param name="menu" value="true"/>
<param name="loop" value="false"/>
<param name="quality" value="high"/>
<param name="bgcolor" value="#FFFFFF"/>
<noscript><a href=http://www.dvdvideosoft.com/
converter/video/avi-video-converter.htm>avi
 converter</a></noscript>
<embed src="vw_fallschirm.swf"
menu="true"
loop="false"
quality="high"
 bgcolor="#FFFFFF" width="320" height="240"
name="player"
align="middle"
 allowScriptAccess="sameDomain" type="application/x-shockwave
-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"/>
</object>

nach oben

zurück

 

Tutorials von Thomas Frei-Herrmann

diese Seite weiter empfehlen


Counter Statistik