Flash Skin VideoPlayer
Scripte > Multimedia
Videoplayer mit Skinauswahl und integrierter Playlist
Hier einige Videoplayer, die in jeder Webseite Platz finden. Insgesamt stehen 14 verschieden Skins in jeweils 2 verschiedenen Playergrößen zur Verfügung. Änderungen an den Größen des Players sollten nur erfahrende Nutzer durchführen. Zum ansehen der jeweilien Skins und Skingrößen einfach den entsprechenden Button klicken. In der Konfigurations-Datei "videoplayer.xml" können diverse Einstellungen vorgenommen und die Playlist eingegeben bzw. angepasst werden. Im Verzeichnis "files" werden die Vidodateien abgelegt. Näheres dazu in der Einbau-Anleitung, die genau befolgt werden sollte und dem ZIP-Paket beiliegt.
Zur Vereinfachung für Player-Einbaus haben wir die <?php include "...."; ?> Variante gewählt, um Änderungen nur in einer Datei durchführen zu müssen und die Playerwahl jederzeit geändert werden kann. Hier muss aber die ausführende Datei die Dateiendung .php aufweisen, um den Code ausführen zu können.
Es wird das Flashformat der Videodateien (.flv) zur Wiedergabe benötigt. Zum Abspielen von Flashdateien muss das Browser-Plugin Adobe Flashplayer installiert und aktiviert sein.
ZIP-Datei in ein beliebiges Verzeichnis auf dem PC entpacken und das Verzeichnis "wsX5Obj" auf den Webserver in das Root-Verzeichnis kopieren.
HTML-Code nur in den BODY-Bereich <body>...</body> der aufrufende Datei einfügen und Einträge gemäß Playerauswahl (Skin und Größe) tätigen.
Eine demo.php ist beigefügt, die zum Test in das Root-Verzeichnis des Webservers kopiert werden kann.
Aufruf: "http://www.domain.tld/demo.php".
Die wichtigsten Konfigurations-Parameter | ||
Datei "videoplayer.xml": | playonstartup | Autostart des Videos aus/ein (f/t) |
loop | Wiederholung Video n/j (f/t) | |
shuffle | Zufallswiedergabe aus/ein (f/t) | |
<node> ... </node> | Konfiguration Videodateien und Videotitel der Playlist | |
Datei "media_inc.html" bzw. HTML-Code: | bgcolor | Hintergrund des Videos (Standard ist weiß #ffffff) |
width | nur erfahrene Nutzer sollten die Höhen oder Breiten des Players ändern, da alle Bedienfunktionen des Players in der videoplayer.xml über die x- und y-Achsen definiert werden. | |
height | ||
zur Anleitung |
Player im Autostart-Modus
Zur Wiedergabe Button

Code für den <BODY> Bereich
<?php
$SKIN = "marooned"; // Skin des Videos
$SIZE = "small"; // Videogröße (small/med)
include
"wsX5Obj/Obj180_0/skins/$SKIN/$SIZE/media_inc.html";
?>
Code für den <BODY> Bereich
<?php
$SKIN = "portable-dvd"; // Skin des Videos
$SIZE = "small"; // Videogröße (small/med)
include
"wsX5Obj/Obj180_0/skins/$SKIN/$SIZE/media_inc.html";
?>
Code einer Datei "media_inc.html"
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"width="300"height="294"id="Obj180_1s"align="middle">
<param name="movie" value="wsX5Obj/Obj180_0/skins/black-tv/small/videoplayer.swf"/><param name="quality" value="high" /><param name="scale" value="noscale" /><param name="salign" value="lt" /><param name="bgcolor" value="#ffffff" /> <!-- Hintergrundfarbe hier und 3 Zeilen tiefer identisch --><embed src="wsX5Obj/Obj180_0/skins/black-tv/small/videoplayer.swf"
quality="high"bgcolor="#ffffff"width="300"height="294"name="Obj180_1s"scale="noscale"salign="lt"align="middle"type="application/x-shockwave-flash"pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
Code einer Datei "videoplayer.xml"
<?xml version="1.0"?>
<coffeecupvideoplayer version="3.0">
<videobox
x="0"y="0"w="300"h="294"playonstartup="t"loop="f"shuffle="f"bkdobk="f"bkdogradient="f"bkfillclr="0x000000"bkfillalpha="100"bkgradclr="0xFFFFFF"bkgradalpha="100"bkgradangle="70"bkdoimg="t"bkimg="wsX5Obj/Obj180_0/skins/black-tv/small/img/bd.png"bkdobdr="f"bkbdrsolid="t"bkbdrcolor="0x808080"bkdomask="t"><rewindbutton
x="71"y="252"w="48"h="32"toggle="f"btnupimg="wsX5Obj/Obj180_0/skins/black-tv/small/img/rr.jpg"action="rr"visible="t">
</rewindbutton><ffbutton
x="180"y="251"w="49"h="33"toggle="f"btnupimg="wsX5Obj/Obj180_0/skins/black-tv/small/img/ff.jpg"action="ff"visible="t">
</ffbutton><playbutton
x="118"y="244"w="58"h="48"toggle="t"btnupimg="wsX5Obj/Obj180_0/skins/black-tv/small/img/play.jpg"btndownimg="wsX5Obj/Obj180_0/skins/black-tv/small/img/pause.jpg"action="playpause"visible="t">
</playbutton><shufbutton
x="111"y="68"w="35"h="14"toggle="t"action="shuf"visible="f">
</shufbutton><loopbutton
x="100"y="0"w="20"h="20"toggle="t"action="loop"visible="f">
</loopbutton>
<volumex="203"y="229"w="73"h="10"visible="t">
</volume><progress
x="19"y="229"w="159"visible="t">
</progress><tree
<node label="Titel-Liste"> <!-- hier die Playlist anpassen, Pfade NICHT ändern -->x="17"y="68"w="264"h="62"visible="f">
<node name="" file="../../../files/big_buck_bunny.flv" artist="Unknown" label="(1) Big Buck Bunny" />
<node name="" file="../../../files/pixar_jungle.flv" artist="Unknown" label="(2) Pixar Jungle" />
<node name="" file="../../../files/crazy_frog_champions.flv" artist="Unknown" label="(3) Crazy Frog: Champions"/>
<node name="" file="../../../files/crazy_frog_popcorn.flv" artist="Unknown" label="(4) Crazy Frog: Popcorn" />
</node>
</tree><label
x="391"y="266"w="53"h="16"bkdobk="f"bkdogradient="f"bkdoimg="f"fntalpha="100"fntsize="10"fntclr="0xFFFFFF"fntbold="f"fntitalic="f"fnt="Arial"visible="t">
</label>
<scrolllabelx="353"y="348"w="273"h="16"bkdobk="f"bkdogradient="f"bkdoimg="f"fntalpha="100"fntsize="10"fntclr="0x000000"fntbold="f"fntitalic="f"fnt="Arial"visible="t">
</scrolllabel><treebutton
x="10"y="254"w="47"h="9"toggle="t"btnupimg="wsX5Obj/Obj180_0/skins/black-tv/small/img/pl.jpg"btndownimg="wsX5Obj/Obj180_0/skins/black-tv/small/img/pl.jpg"action="tree"visible="t">
</treebutton><video
x="23"y="27"h="195"w="256"visible="t">
</video>
</videobox>
</coffeecupvideoplayer>
Diese Skins liegen dem ZIP-Paket zur Auswahl bei.
Bitte die Einbauanleitung dazu lesen.
Zum vergrößern auf das entsprechende Skin klicken.
Bitte die Einbauanleitung dazu lesen.
Zum vergrößern auf das entsprechende Skin klicken.
Es werden jeweils beide Skingrößen im Popup angezeigt.
Einbauanleitung:
- Videoskin gemäß Liste wählen.
- HTML-Code in den <body>...</body> einfügen, dort wo der Player erscheinen soll und Skin sowie Größe eintragen.
- Webseite testen, diese sollte mit dem gewählten Skin und den Voreinstellungen bereits ein Video anzeigen und abspielen.
- Eigene Videodateien (.flv) in das Verzeichnis "wsX5Obj/Obj180_0/files" auf dem Webspace ablegen.
- Datei "videoplayer.xml" in dem gewählten Skinverzeichnis (Skin/Größe) auf dem Webspace zur Bearbeitung öffnen.
- Vor dem </tree> Tag die Playlist bearbeiten/ergänzen (Bereich ist gekennzeichnet).
- Sollte eine andere Hintergrundfarbe als voreingestellt "weiß" nötig sein, Datei "media_inc.html" in dem gewählten Skinordner zur Bearbeitung öffnen.
- Hintergrundfarbe <bgcolor> bei 2 Elementen anpassen (Bereich ist gekennzeichnet).
Fertig.
Vor jeder Dateibearbeitung vorher eine Kopie der Datei zur Sicherung ablegen!
Da die Zusammenstellung der einzelnen Skinverzeichnisse sehr viel Konzentration bedeutete, kann trotzdem ein Fehler unterlaufen sein.
Sollte unerwartet doch etwas nicht funktionieren, einfach melden.
Viel Spass mit dem Player.
Feedbacks zu ""
Bitte Dein Feedback
Du wirst als User bei Deinem ersten Kommentar automatisch registriert und musst dies noch bestätigen.
Erstellen Dir ein Konto, damit Deine Kommentare dann ohne Bestätigung veröffentlicht werden.
Vielen Dank für Dein Feedback.
Lambert Schulz
27.10.2014, 16:12+0 -0