Gruppen

Top Gruppen: Windows 7; Windows Vista; Windows XP; Textverarbeitung; Excel; DSL; Internet Browser; E-Mail/Outlook
Betriebsysteme: Windows classik; Linux; BS-Sonstige
Software: Datenbanken; Bildbearbeitung; Audio/mp3/Video; Security/Viren; SW-Sonstige
Hardware: Mainboard/CPU; Grafikkarten; Peripherie; Laptop/Notebook; HW-Sonstiges
Netzwerk: Telefon,ISDN,Modem; W-Lan; NW-Sonstiges
Programmierung: PHP,ASP,Perl...; Java,C++...; Webseiten/HTML
Sonstiges: PC-Sonstiges; Plauderecke; SN Intern; Test

/ Forum / Webseiten/HTML

Webseiten/HTML

Fragevon Computerfreaki vom 01.05.2020, 19:26 Options

Bei Klick soll Video angezeigt werden - JavaScript

Sry das ich euch mit einer so einfachen Frage belästigen muss ;-).
Ich habe keine Ahnung von JS.
Ich wollte für meine neue HP eine Videoseite mit YouTube-Videos erstellen.

Das diese nicht zu lange lädt, wollte ich ein Link für jeden Video erstellen.

Also wenn ich z.B auf den Link:

<a>Video 1</a> klicke soll statt diesem Link
Dieser Code:

<object width="425" height="355"><param name="movie" value="http://www.youtube.com/v/rGrw4gWQmH8&hl=de&color1=0x3a3a3a&color2=0x999999"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/rGrw4gWQmH8&hl=de&color1=0x3a3a3a&color2=0x999999" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed></object>

genau an der Stelle ersetzt werden.

Antwort schreiben

Antwort 1 von katy vom 02.05.2020, 20:35 OptionsLösung

Hallo Computerfreaki,

also wenn du ein div (oder ähnliches) drumherum baust gehts. Ein Link ist übrigens nicht nötig, wenn du JavaScript nutzt:

<div onclick="ersetze(this)">Video 1</div>

im Scriptbereich musst du diese Funktion unterbringen:

function ersetze(wo) {
 wo.innerHTML='<object width="425" height="355"><param name="movie" value="http://www.youtube.com/v/rGrw4gWQmH8&hl=de&color1=0x3a3a3a&color2=0x999999"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/rGrw4gWQmH8&hl=de&color1=0x3a3a3a&color2=0x999999" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed></object>';
 wo.onclick="";
}

katy

Antwort 2 von Computerfreaki vom 03.05.2020, 10:24 Options

Funktioniert das auch mit dem <a>-Tag ??
Also das Video 1 als Link angezeigt wird und unterstrichen wird.

Antwort 3 von katy vom 03.05.2020, 10:36 Options

Hallo Computerfreaki,

nein das funktioniert mit a nicht, denn a ist kein Blockelement, darf also nicht sowas wie object beinhalten.

Für das Aussehen kannst du aber CSS nutzen und so das Aussehen eines Links simulieren.

katy

Antwort 4 von Computerfreaki vom 03.05.2020, 10:39 Options

Ok werd ich machen

Antwort 5 von Computerfreaki vom 30.05.2020, 14:21 Options

So da ich jetzt eine Video Top 10 machen will brauche ich mal Hilfe:
Der Skript von Antwort 1 funktioniert ja aber das ist nur sinnvoll wenns nur ein Video gibt.

Wenn man jetzt die Funktion aufruft soll sich in den Klammern der Videocode befinden.

Hier ein Beispiel von mir:


function ersetze(video) {
 this.innerHTML=video;
 this.onclick="";
}

Der Link soll dann so aussehen:


<div onclick="ersetze(<object....>)">Video 1</div>

Aber bevor ich auf den Link klicke ist das Video schon da.

Ach übrigens:
Ich hab mir jetzt ein JavaScript-Buch gekauft :-)

Antwort 6 von katy vom 30.05.2020, 18:25 Options

Hallo Computerfreaki,

da ist wohl einiges im Argen.

Ganz offenkundig: das Argument der Funktion ersetze() muss in Anführungszeichen stehen. Da die Funktion bei dir in doppelten steht musst du für das Argument einfache nehmen. Dann dürfen innerhalb des Arguments gar keine unmaskierten Anf.zeichen mehr vorkommen. Wie du Anf.zeichen maskierst steht auf SelfHTML (wo sonst?).

katy

Antwort 7 von Computerfreaki vom 31.05.2020, 08:21 Options

Ja wie meinst du das jetzt ??
Ich habe jetzt vor allen doppelten Anführungszeichen ein Backslash hingemacht.
Das Video wird aber schon angezeigt wenn ich die Seite geladen habe.

Hier mal die Datei ersetzen.js:


function ersetze('video') {
 this.innerHTML= video;
 this.onclick="";
}

So und jetzt die HTML-Datei:

<html>
<head>
<title>Javatext</title>
<script type="text/javascript" src="ersetzen.js"></script>
</head>
<body>
<div onclick="ersetze('<object width=\"425\" height=\"355\">
<param name=\"movie\" value=\"http://www.youtube.com/v/rGrw4gWQmH8&hl=de&color1=0x3a3a3a&color2=0x999999\"></param>
<param name=\"wmode\" value=\"transparent\"></param>
<embed src=\"http://www.youtube.com/v/rGrw4gWQmH8&hl=de&color1=0x3a3a3a&color2=0x999999\" type=\"application/x-shockwave-flash\" wmode=\"transparent\" width=\"425\" height=\"355\"></embed></object>')>Video anzeigen</div>
</body>
</html>

Antwort 8 von katy vom 31.05.2020, 09:44 Options

Hallo Computerfreaki,

die vielen HTML-spezifischen Zeichen (<, >, ", &) bringen einfach deinen Browser durcheinander.
Wenn du diesen String so nehmen willst musst du ihn irgendwie in einem externen Script unterbringen.

Bei der Funktionsdefinition sind die ' jetzt übrigens zuviel, die sind nur beim Aufruf nötig.

Tipp: im Firefox gibts im Menü EXTRAS eine Fehlerkonsole, die erspart so manche Supportnetanfrage.

katy

Antwort 9 von Computerfreaki vom 31.05.2020, 10:20 Options

Stimmt da haste recht ich werde mal schauen

Antwort 10 von Computerfreaki vom 01.06.2020, 13:02 Options

Habe schon wieder ein Problem:


<html>
<head>
<script language="javascript">
function aendern (code) {
  document.all.video.innerText = code;
}
</script>
</head>
<body>
<a onclick="aendern('Hier gehts um <b>jan</b>')" id="video">auf klick ausblenden</a><br>

</body>
</html>

Wenn ich jetzt mein Videocode mit maskierten Anführungszeichen einüge wird das Video wieder gleich angezeigt.
Laut Fehlerkonsole befindet sich kein Fehler in JScript.

Es funktioniert nur mit HTML-Tags ohne Anführungszeichen. Also <b>,<u>,<i>.

Ich bin hier gerade am verzweifeln :-(
Brauche dringend Hilfe

Antwort 11 von Computerfreaki vom 01.06.2020, 13:03 Options

Sorry das oben in Zeile 5 soll natürlich innerHTML heißen

Antwort 12 von Supermax vom 01.06.2020, 13:26 Options

Der Inline-Script-Code (also was in onclick="" etc. geschrieben wird) darf keine Zeilenumbrüche enthalten, da sonst einige Browser alles danach fälschlicherweise wieder als Teil des HTML-Codes der Seite interpretieren).

Besser wäre es, den kompletten Code in eine javascript-Funktion zu packen, der z.B. der Name des Videos als Parameter übergeben wird, also

<script type="text/javascript">
function ersetze(id,videodatei) {
   var htmlcode = "<object width=\"425\" height=\"355\">"
      + "<param name=\"movie\" value=\""+videodatei+"\"></param>"
      + "<param name=\"wmode\" value=\"transparent\"></param>"
      + "<embed src=\""+videodatei+"\" type=\"application/x-shockwave-flash\" wmode=\"transparent\" width=\"425\" height=\"355\"></embed>"
      + "</object>";
   var objekt = document.getElementById(id);
   if (object != null) objekt.innerHTML = htmlcode;
}

Aufgerufen würde das dann mit

<div id="video" onclick="ersetze('video','http://www.youtube.com/v/rGrw4gWQmH8&hl=de&color1=0x3a3a3a&color2=0x999999')">klicken für Video</div>

Antwort 13 von Supermax vom 01.06.2020, 13:28 Options

In der vorletzten Zeile der Funktion muss es natürlich korrekterweise heissen

if (objekt != null) objekt.innerHTML = htmlcode;

Antwort 14 von Computerfreaki vom 01.06.2020, 13:58 Options

Dein Skript ist nicht schlecht aber ich wollte ja eine Top 10 Seite machen wo ich dann nur Links habe die dann die Videos öffnen.
Sonst muss ich ja für jeden Video einen Skriptdatei machen.

Ich wollte nur das man den Video code der Funktion übergeben kann.

Also z. B so:


<div id="video" onclick="ersetze('Hier kommt dann der Videocode rein')">klicken für Video</div>

Die Funktion könnte dann so aussehen:


function ersetze(id, html) {
document.getElementById(id).innerHTML = html;
}

Antwort 15 von Supermax vom 01.06.2020, 14:19 Options

Im Prinzip macht meine Funktion ja nichts anderes, nur daß der unveränderliche Code eben in der Funktion steht statt direkt im onclick-Attribut. Das funktioniert klarerweise so nur, wenn du nur Videos von einem Portal - in diesem Fall eben youtube - einbindest.

Wenn du den kompletten Code als Parameter übergeben willst, mußt du wie bereits gesagt nur darauf achten, daß keine Zeilenvorschübe vorhanden sind, also der komplette Code in einer Zeile steht, du kannst dabei die Zeilenvorschübe entweder komplett weglassen oder durch \n ersetzen, also statt

onclick="ersetze('video','<object ... >
</object>')"

entweder

onclick="ersetze('video','<object ...>\n</object>')"

oder

onclick="ersetze('video','<object ...></object>')"

Statt der ... mußt du dir jetzt natürlich den Rest deines HTML-Codes vorstellen.

Antwort 16 von Computerfreaki vom 01.06.2020, 18:28 Options

Ok danke für deine Antwort.

Ich wollte nur Youtube oder Myvideo Videos einbinden

Antwort 17 von katy vom 01.06.2020, 20:03 Options

Hallo Computerfreaki,

dieser Code könnte das Problem lösen. Du hast dein object im HTML und außerdem würde, falls javaScript nicht verfügbar ist, trotzdem das Video zu sehen sein. ich meine, das wäre sogar ein Gewinn!

<div onclick="ersetze(this)">Video 1
<noscript>
<object width="... >
(das kennst du ja)
</object>
</noscript>
</div>

im Scriptbereich musst du diese Funktion unterbringen:

function ersetze(wo) {
 var derCode = wo.getElementsByTagName("noscript")[0].innerHTML;
 wo.innerHTML = derCode;
 wo.onclick = "";
}

Also: in jedem der DIvs liegt ein noscript-Bereich mit dem Video-Code. Der wird ausgelesen und dann der gesamte DIV-Inhalt damit überschrieben.

katy

Antwort 18 von Computerfreaki vom 01.06.2020, 20:48 Options

Genial genau das hab ich gesucht.
Ist zwar en bisschen umständlicher als das andere aber das wird schon gehen.

Ich will ja keine Videoseite wie Youtube oder Myvideo aufmachen ;-)

Antwort 19 von Computerfreaki vom 28.06.2020, 12:02 Options

So da bin ich mal wieder,

nach lesen zahlreicher Online-Magazine und Bücher über JavaScript habe ich nun die entgültige Version erstellt.

Es lag warscheinlich nur an den Anführungszeichen, dass das Video gleich angezeigt wurde.
Hier der Skript:


function ersetzen(id, code){
	var newHTML = code;
	document.getElementById(id).innerHTML = newHTML;
}

und hier ein einfaches Beispiel mit Anführungszeichen :-):


<div id="test">
blablablablablablablablablablablablablablablabla
</div>
<input type="button" value="Ersetzen" onclick='video("test", "<a href=\"http://www.supportnet.de\">Supportnet</a>")'>

Hinweis

Diese Frage ist schon etwas älter, Sie können daher nicht mehr auf sie antworten. Sollte Ihre Frage noch nicht gelöst sein, stellen Sie einfach eine neue Frage im Forum..

Neue Einträge

Tipp einschicken

News einschicken