HTML 1 Website mit viele Videos

A7R3YU · 28. August 2012

Hallo Forum,

die Aufgabe ist es, eine Website zu erstellen, auf der ca. 20 Videos angezeigt werden. (Nur eins auf ein mal)
Ich habe das jetzt so gelöst, indem ich eine HTML-Seite erstellt habe, auf der ein Video ist und die Liste aller Videos. Die Seite habe ich zwanzig mal kopiert. Diese sind alle identisch, außer, dass jede ein anderes Video beinhaltet. Über die Liste sind alle unter einander verlinkt.

Das finde ich jetzt sehr unelegant. Gibt es eine Möglichkeit, nur eine HTML-Seite zu haben und bei Klick auf einen Listenpunkt sich nur eine Variable (der Pfad zum Video) ändert?

Ist das mit PHP umzusetzen? Das werde ich das nächste Schuljahr sowieso haben und es wäre nicht schlecht, wenn ich mich ein wenig darauf vorbereite.

BuzzGo · 28. August 2012

Das geht u.a. mit PHP, aber auch mit JS... Aber Hausaufgaben löse ich dir hier nicht!

A7R3YU · 28. August 2012

Das ist keine Hausaufgabe. Der Unterricht hat noch gar nicht begonnen und das ist eine FAQ Seite für meinen Betrieb .. als Nebenbeiaufgabe, weils eigentlich nicht mein Gebiet ist (Nur C++ & C# Kenntnisse vorhanden). Ich suche nur einen Anstoß, keine fertige Lösung.

Ergänzung (28. August 2012)

Ich such mich dumm und dämlich. JavaScript scheint mir am sinnvollsten für diese Aufgabe zu sein. Wie kann ich z.B. folgendes umsetzen.

1. Listenpunkt1
2. Listenpunkt 2

Ausgabe: Variable

Wenn man auf einen Listenpunkt klickt, soll die Variable dementsprechend geändert werden.

Daaron · 28. August 2012

Das Stichwort heißt AJAX. Jeder deiner "Links" sorgt nur dafür, dass das passende Video in den Container geladen wird. Oder, wenn du eh HTML5-Video einsetzt, änderst du einfach nur die <source>'s

Furtano · 28. August 2012

Mit PHP und $_GET['id'] gehts sicherlich auch,
die ID des Videos wird einfach in einer Datenbank gespeichert (mysql) mit dem dazugehörigen Link und dann ausgelesen.

mercsen · 28. August 2012

ja aber dann sieht man das neu laden der seite, pfui !

also wenn du sonst keine großen anforderungen hast und bereit bist JS einzuseten (juhu) dann gibts nichts besseres, bzw. leichteres.

um mal auf unnötige franeworks oder komplizierte implementierungen zu verzichten hier mal nen kleines beispiel:

Code:

<!DOCTYPE html>
<html>
    <head>
        <title>Videos mit Dropdown</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript">
            function onChange(elem) {
                var ausgabe;
                // Das Span Feld suchen, wo die ausgabe erfolgen soll
                ausgabe = document.getElementById('Ausgabe');
                // und den inhalt anpassen
                ausgabe.innerHTML = elem.value;
            }
        </script>
    </head>
    <body>
        <div>
            <select onchange="onChange(this)">
                <option value="pfad_zu_video_1">Video 1</option>
                <option value="pfad_zu_video_2">Video 2</option>
                <option value="pfad_zu_video_3">Video 3</option>
                <option value="pfad_zu_video_4">Video 4</option>
            </select>
        </div>
        
        <div>
            <span>Auswahl:</span> <span id="Ausgabe"></span>
        </div>
    </body>
</html>

(wer jetzt meckert das der eventhandler total misshandelt wird, schnauze, soll ja leicht gehalten sein!

)

das prinzip ist folgendes:

dem select feld gibst du über das attribute onchange einen eventhandler. dieser eventhandler wird ausgelöst / aufgerufen sobald der user ein anderes option element auswählt.

die funktion die aufergufen wird ist hier onChange(this)

das heißt der funktion onChange wird das select feld übergeben und steht innerhalb der funktion als variable elem zur verfügung.

über elem.value bekommst du das value attribute des aktuell gewählten option felds.

über document.getElementById() kannst du jedes beliebige HTML objekt aus dem DOM laden, solange du den wert des ID attributes kennst. Hier heißt das span weiter unten "Ausgabe".

der rest ist ja fast selbsterklärend, oder? sonst frag gerne nach!

edit:
lol, @ daaron ;D
obwohl man das nicht zwingend in JS auslagern muss sondern direkt in HTML schreiben kann.

Daaron · 28. August 2012

solange man nicht auf die Idee kommt, sinngemäß "SELECT * FROM videos WHERE ID=$_GET['video']" zu machen...

Wie gesagt, einfach im JS die Quellen lagern und einfach das <video>-Element manipulieren.

Furtano · 28. August 2012

@Daaron wieso nicht, diese abfrage ist doch sinnvoll?

Daaron · 28. August 2012

Ne, mit dem Wortlaut ist sie lediglich eine Einladung zur SQL Injection...

Furtano · 29. August 2012

nagut dann macht man noch ein mysql_real_escape_string() dazu aber dann is gut

mercsen · 29. August 2012

hier ist wieder das berühmte problem hardcoded vs. dynamisch.

hier handelt es sich ja um eine faq und ein nebenprojekt, alzu oft wird sich der content wohl nicht ändern also wäre es ja schwachsinn "quasi statische" werte in einer db zu speichern.

die "DB" kannst du dir dann schnell in HTML (als dropdown, liste blablabla) oder in JS (als z.b. array oder object) schreiben und sparst dir den umweg über ne externe datenquelle und enorm viel an aufwand

A7R3YU · 29. August 2012

Mercsen schrieb:
[...] hier mal nen kleines beispiel [...]

Danke! Kann ich anhand dieses Beispiel die Variable auch in meinen Videoaufruf einbauen? Bei file:

Code:

<script type="text/javascript" src="jwplayer.js"></script>
<div id="container">Video lädt ...</div>
<script type="text/javascript">
	jwplayer("container").setup
	(
		{
			flashplayer: "player.swf",
			file: "01_Vorspann.flv",
			height: 420,
			width: 480
		}
	);

Daaron · 29. August 2012

Muss es denn Flash-Mist sein? Nimm HTML5-Video, damit wird alles viel einfacher.

A7R3YU · 29. August 2012

Code:

<video controls width="428" height="350" src="01_Vorspann.webm">
	Video kann nicht abgespielt werden.
</video>

Danke für die Anregung. Nun aber noch mal die gleiche Frage. Kann ich die Source mit einer Variablen ersetzen?

Daaron · 29. August 2012

Ändere per JS das src-Attribut des <video>-Tags.

Du solltest aber, zwecks Browserkompatibilität, lieber diese Codevariante nutzen und dann das/die <source>-Element(e) manipulieren.

Lord_Dragon · 29. August 2012

Wenn es simples HTML bleiben soll, wäre es doch mit einfachen Framesets gelöst.

A7R3YU · 29. August 2012

Daaron schrieb:
Ändere per JS das src-Attribut des <video>-Tags.

Wie ist die Frage.

Im Moment habe ich eine Aufzählungsliste, die ich am liebsten für die Navigation verwenden würde. Eine Dropdownliste, wie in Mercsens Beispiel würde auch gehen, auch wenns etwas umständlicher für den Anwender ist.

Wenn ich mich an Mercsens Beispiel halte, was muss ich dann als src einfügen. Das <span id="Ausgabe"></span> ?

Edit: So sieht mein Code aus.

Code:

	<tr align="left">
		<th width="320">
			<ul>
				<li>Vorspann</i></li>
				<li>System einschalten</li>
				<li>Einlegen der Dokumente</li>
				<li>Papierkassetten</li>
				<li>Stapelpapiereinzug</li>
				<li>Bedienfelderklärung</li>
					<ul><li>Bedienfelderklärung 2</li>
						<li>Bedienfelderklärung 3</li></ul>
				<li>einfache Kopie</li>
				<li>mehrseitige Kopie</li>
					<ul><li>mehrseitige Kopie 2</li>
						<li>mehrseitige Kopie 3</li></ul>
				<li>Touchpanelerklärung</li>
				<li>Vergrößern & Verkleinern</li>
				<li>Hilfefunktion</li>
				<li>Endausgabeverarbeitung</li>
					<ul><li>Endausgabeverarbeitung 2</li>
						<li>Endausgabeverarbeitung 3</li></ul>
				<li>Broschüreneinstellung</li>
				<li>Scannen und versende</li>
				<li>Fax versenden</li>
			<ul>
		</th>
		<th>
			<video controls width="428" height="350">
				<source src="webM/vorspann.webm" type="video/webm">
				Video kann nicht abgespielt werden.
			</video>
		</th>
	</tr>

Daaron · 29. August 2012

http://mootools.net/docs/core/Element/Element#Element:setProperty

Eine Option, wie man die Eigenschaften von Elementen ändern kann...

A7R3YU · 29. August 2012

Habe ich das falsch verstanden, oder wieso geht das nicht bei mir?

Code:

<!-- Wenn man hier drauf klickt -->

<a href="#" onclick="$('video').setProperties({src: 'webm/system.webm', type: 'video/webm'}); return false">System einschalten</a>

<!-- sollen hier das Video abgespielt werden -->

<video controls width="428" height="350">
<source id="video">
Video kann nicht abgespielt werden.
</video>

Daaron · 29. August 2012

Wenn du mehrere Parameter (also Objekt) setzen willst, dann musst du .setProperties() nutzen. setProperty() ändert nur einen Parameter und hat auch andere Syntax.
Ansonsten: Mootools-Lib eingebunden?

HTML 1 Website mit viele Videos

Lieutenant

Lieutenant

Lieutenant

Fleet Admiral

Furtano

Gast

Lt. Commander

Fleet Admiral

Furtano

Gast

Fleet Admiral

Furtano

Gast

Lt. Commander

Lieutenant

Fleet Admiral

Lieutenant

Fleet Admiral

Captain

Lieutenant

Fleet Admiral

Lieutenant

Fleet Admiral

Ähnliche Themen