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.

Downloads:

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

drücken

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";

Nach dem <BODY> Tag

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";

Nach dem <BODY> Tag

Code einer Datei "media_inc.html"

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" /> 
<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"?>

<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>

<volume
x="203"
y="229"
w="73"
h="10"
visible="t">

</volume>
<progress

x="19"
y="229"
w="159"
visible="t">

</progress>
<tree

x="17"
y="68"
w="264"
h="62"
visible="f">

</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>

<scrolllabel
x="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.

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 ""

Lambert Schulz

27.10.2014, 16:12

+0 -0

Danke für die schnelle Hilfe

Lambert Schulz

27.10.2014, 14:28

+0 -0

leider erscheint das Startimage bei mir nicht auf dem Startbildschirm des Players (player_flv_maxi.xml).Woran könnte das liegen?

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.

Bewertung:

Name:

E-Mail:

Kommentar:

Datei Upload:

Captcha:

Vielen Dank für Dein Feedback.

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.

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.