HTML 1 Website mit viele Videos

A7R3YU · 29. August 2012

Ja den Plural hat ich eben schon geändert, das wars nicht. Ich hab nichts eingebunden, wie geht das? (Sorry, letzte Woche konnte ich noch kein Wort HTML)

edit:so?

Code:

<head>
<script><script type="text/javascript" src="js/mootoolsC.js"></script>
</head>

mercsen · 29. August 2012

so ziemlich richtig. entscheidend ist hier das du auf realtive und absolute pfade achten musst, das sollte dir als c++ und c# entwickler ja aber ein begriff sein?

wenn du, ausgehend von deiner index datei, ein unterverzeichnis "js" hast und dort die datei MootoolsC.js liegt ists korrekt.

ich hätte dir aber vorgeschlagen das ganze ohne externe lib zu machen (hab ich glaube ich sogar

), wäre zwar auf den ersten blick ein wenig länger der code, aber auch einleuchtender, meiner meinung nach sollte man die finger von solchen libs lassen wenn wenn man nicht weiß was im Hintergrund passiert, bzw. in der lage wäre das ganze selber zu rekonstruieren.

du hättest ja auch einfach das komplette video tag austauschen können, oder aber über

Code:

document.getElementById('id_des_video_tag').src = 'pfad_zu_neuem_video';

das src element ändern.

edit:
mit index meinte ich nun die datei, die das script einbindet.

A7R3YU · 29. August 2012

ja die pfade sollten stimmen. die html-datei liegt im gleichen ordner wie der js-ordner (beinhaltet mootools) und der webm-ordner (beinhaltet videos)

Code:

<html>
	<head>
		<script type="text/javascript" src="js/mootoolsC.js"></script>
	</head>
	<body>
		<p><a href="#" onclick="$('video').setProperties({src: 'webm/system.webm', type: 'video/webm'}); return false">System einschalten</a></p>
		<p><video controls width="428" height="350">
		<source id="video">
		Video kann nicht abgespielt werden.
	</video></p>
		

	</body>
</html>

Beim Druck auf den Link passiert nichts.

Gegentest: Füge ich die Paramter per hand ein, läuft das Video

Code:

<video controls width="428" height="350">
			<source src="webm/system.webm" type="video/webm" />
			Video kann nicht abgespielt werden.
</video>

mercsen · 29. August 2012

logisch das dass net funktioniert

$('video') sucht alle video-TAGS,
du möchtest nach einem TAG mit der ID 'video' suchen.

also machst du: $('#video')

aber bitte packe das ganze nicht in ein a-element, das ist reine html vergewaltigung..... fast alle html tags verstehen den onclick handler.

<span onlclick=blablabla>Video1</span>

Daaron · 29. August 2012

Mercsen schrieb:
$('video') sucht alle video-TAGS,

Nö, nicht bei Mootools.
$('myElement') ist dasselbe wie document.getElementById('myElement')

Alle Video-Tags würde man über $$('video') bekommen. Wäre aber auch kein Problem, denn dann lässt man einfach über das resultierende Array ein each() laufen, dass mit den Elementen dann was passendes anstellt. Außerdem kann man teilweise auch auf ein Element-Array Funktionen anwenden, die für Elemente gedacht sind. Die Funktionen wirken dann auf alle Teile des Arrays.

mercsen · 29. August 2012

dann ziehe ich meinen kommentar zurück, sitz hier in der bahn und bin nicht voll da, lol.

ich weiß schon wieso ich jQuery treu bleibe. (bitte jetzt keine pro contra diskussion starten :S)

nichts desto trotz: lagere den ganzen teil von onclick mal in eine funktion aus!
das macht das debuggen schonmal leichter.

z.b.

Code:

function onClick(evt) {
    var video = $('video');
     
     alert(vdeo.length);
}

<span onclick="onClick">Video 1</span>

bei einem klick sollte dir ein popup entgegenschießen indem eine 1 steht, wenn das schon nicht klappt kann mootools entweder nicht mit megth umgehen (würde mich aber wundern) oder es läuft etwas ganz verkehrt :-/

der letze teil ist ja fast logisch, genau wie bei jQuery. hier will er ja aber ein gezieltes element ändern.

zudem gibt es hier beides, das video tag und ein element mit der id video, bearbeitet mootools da nun beide?

guck mal nach einem klick in den quellcode und schau nach ob sich da was am src attribute geändert hat

nochmal: mache es einfach dirket in puren javascript, nur um das src attribute zu ändern ein ganzes framework einzubinden ist einfach, äh.... verschwenderisch

p.s.
wieso willst du den type jedesmal neu setzen? bleibt der nicht immer gleich?

Daaron · 29. August 2012

Ich würd den onclick-Part im HTML-Code direkt weglassen und über Mootools n Click-Handler an die zu Steuerelemente pappen. Sieht hübscher aus.

mercsen · 29. August 2012

das haben wir aber ganz am anfang schon verworfen. aber ja, das sieht nicht nur hübscher aus sondern ist auch übersichtlicher und sollte eigentlich nur so gemacht werden (so kriegst wenigstens ansatzweise MVC hin)! Aber naja..... hier solls ja nur schnell gehen und funktionieren.

A7R3YU · 29. August 2012

Also hierbei passiert gar nichts. Wieso soll eine 1 aufpoppen? Video wurde doch nie ein Wert zugewiesen?

Code:

<html>
	<head>
		<script type="text/javascript" src="js/mootools.js"></script>
	</head>
	<body>
		<script type="text/javascript">
			function onClick(evt)
			{
				var video = $('video');
				alert(video.length);
			}
		</script>
		<span onclick="onClick">Video 1</span>
	</body>
</html>

In meinem Hauptcode ändert sich auch nichts im Quelltext, nach dem Klick auf den Link.

mercsen · 29. August 2012

natürlich solltest du auch das

Code:

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

einfügen.

eine 1 sollte aufpoppen weil die die länge der collection haben willst, die du mit $('video') gesucht hast.

ich sagte ja bereits zu beginn lieber nicht auf eine lib zurückzugreifen als blutiger anfänger und sagte dir auch wie du das src element ohne probleme ändern kannst, mittlerweile zweifel ich aber an deiner motivation irgendwas selber zu tun :-/

wenn man sich auskennt machen die dinger einem das leben wirklich leichter, aber sie erzeugen ganz andere fehler / probleme als pure JS die meistens ein wenig mehr erfahrung in der materiere erfordern. nichts gegen dich, aberarbeite dich erstmal in das Thema ein.

von vorkenntnissen in c++ und c# merkt man leider auch net alzu viel, was genau sind das denn für vorkenntnisse?

sonst nimm chrome und guck dir da mal den debugger an, funkgtioniert wie ein debugger in jeder anderen sprache, sollte dir ja eigentlich net fremd sein .....

Ergänzung (29. August 2012)

und hier der code geht zu 100%:

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">
            
            var videos = [];
            
            videos.push('webm/system.webm', 'webm/system2.webm', 'webm/system3.webm');
            
            function clickHandler(id) {
                var source = document.getElementById('video');
                
                source.src = videos[id];
            }
        </script>
        
        <style type="text/css">
            span:hover {
                cursor: pointer;
                font-weight: bold;
            }
        </style>
    </head>
    <body>
            <span onclick="clickHandler(0)">System einschalten</span>
            <br/>
            <span onclick="clickHandler(1)">System 2 einschalten</span>
            <br/>
            <span onclick="clickHandler(2)">System 3 einschalten</span>
            <br/>
            <video controls width="428" height="350">
                    <source id="video">
                    Video kann nicht abgespielt werden.
                </video>
</body>
</html>

wie du die videos speicherste tc. ist dir überlassen, ich hab die jetzt der einfachheit halber einfach in nen array gepushed

ob das ändern des src attributes aber auch das laden des videos anstößt weiß ich nun nicht.

A7R3YU · 29. August 2012

Danke für deine Bemühungen Mercsen.
Vom Prinzip funktioniert das. Hab das Video-Tag durch ein IMG-Tag ausgetauscht und die src's mit bild-urls. Das funktioniert. Mit meinen Videos jedoch nicht.

mercsen · 29. August 2012

mein fehler, dachte das src element muss in der source stehen, hab noich nie mit videos gearbeitet, so klappts

Code:

<video controls width="428" height="350" id="video"></video>

k.a. wozu das source objekt überhaupt nutze ist ^^

A7R3YU · 29. August 2012

Ideal! Danke!
Mein letztes Problem ist, dass all meine Schrift automatisch Fett ist. Die einzige Formation, die ich verwende ist

Code:

<body bgcolor="#BEDBF7" />
<font face="Arial" />

.. aber selbst wenn ich das auskommentier, bleibt es fett. So funktioniert natürlich der Mouseover-Effekt nicht, den ich schon haben möchte.

mercsen · 29. August 2012

zeig doch mal dein kompletten code

wenn den hier nicht posten willst kannst mir auch ne pm schicken, oder am besten den link wo man das projekt live sehen kann, dann guck ich mal eben drüba wo's hackt.

hab mich inziwschen mal nach dem sorce objekt erkundigt, das ist ledigich dazu nütze um den usern die einen browser nutzen die kein webm können eine alternative anzubieten, enorm viel aufwand...... jedes video muss dann doppelt vorliegen

kling1 · 30. August 2012

den font tag gibt es doch im html5 gar nicht mehr.. mach doch das font-weight: bold im css weg

mercsen · 30. August 2012

Richtig......
den font TAG gibt es nicht mehr. font-weight ist aber auch eine css eigenschaft. wie willst du sonst in css fetten text darstellen?
css != html

waere mir neu wenn font-weight deprecated waere, kann mich taeuschen, denke.ich aber net

kling1 · 30. August 2012

meinte ja nur wenn er es nicht fett haben will soll er eben diese eigenschaft entfernen

A7R3YU · 30. August 2012

Ne ne das Problem bestand schon vorher. Die Ursache war, dass ich im Table <th>'s anstatt <td>'s verwendet habe.

Daaron · 30. August 2012

Hm... hast du <table> für nicht-tabellarische Daten verwendet? Ab ins Schande-über-dich - Land!

mercsen · 30. August 2012

ich habe mir das ding angeschaut, wenn auch semantisch vlt. inkorrekt kann man die art wie er das menü aufgebaut hat durchaus in eine table bauen.

(außerdem habe ich ihm das schon erklärt, auch wenn das nicht wissen konntest ^^)

da es eh nur fürsintranet ist und so seo vollkommen lachs ist, wieso nicht eine table nehmen, gerade als anfänger wird einem damit enorm viel arbeit erspart.

man kann ja dezent drauf hinweisen, finde diese ganze gebashe von wegen Tabellen nur für tabellarsiche daten langsam ein wenig ermüdend

schonmal den quellcode eines wbb angeschaut?

diverse (kommerzielle und erfolgreiche) webprojekte nutzen tables wo es eigentlich unangebracht ist...................

ich selber habe gerade für nen projekt einen dialog implementiert, dort werden die buttons innerhalb einer table dargestellt, dann muss man sich um fast nix kümmern.
mit dem richtigen know how ginge es zwar genauso fix mit div's aber ich war faul.

und ob ich jetzt display: table-cell mache oder direkt eine table nutze, who cares?

P.S.
ist nicht böse gemeint

HTML 1 Website mit viele Videos

Lieutenant

Lt. Commander

Lieutenant

Lt. Commander

Fleet Admiral

Lt. Commander

Fleet Admiral

Lt. Commander

Lieutenant

Lt. Commander

Lieutenant

Lt. Commander

Lieutenant

Lt. Commander

kling1

Gast

Lt. Commander

kling1

Gast

Lieutenant

Fleet Admiral

Lt. Commander

Ähnliche Themen