Mehrere Videos auf einer Seite mit javascript steuern

[ThomasMartini65]

Hallo,

Ich möchte zwei Videos auf einer Seite darstellen und per javascript steuern. Ich habe folgenden code:

<video id="myVideo">
  <source id="mp4_src" src="mov_bbb.mp4" type="video/mp4">
  <source id="ogg_src"  src="mov_bbb.ogg" type="video/ogg">
</video>
<button onclick="playVid()" type="button">Play Video</button>
<button onclick="pauseVid()" type="button">Pause Video</button> 

<video id="myVideo2">
  <source id="mp4_src" src="mov_bbb.mp4" type="video/mp4">
  <source id="ogg_src"  src="mov_bbb.ogg" type="video/ogg">
</video>
<button onclick="playVid()" type="button">Play Video</button>
<button onclick="pauseVid()" type="button">Pause Video</button> 

<script>
var x = document.getElementById("myVideo"); 
var x = document.getElementById("myVideo2"); 

function playVid() { 
  x.play(); 
} 

function pauseVid() { 
  x.pause(); 
} 
</script>

Was ist hier falsch? Es startet immer nur das zweite Video, egal welchen Button mann klickt. Bitte helft mir!

Vielen lieben Dank für eure Hilfe, Thomas

[Matthias Scharwies]

Servus!

var x = document.getElementById("myVideo"); 
var x = document.getElementById("myVideo2"); 

function playVid() { 
  x.play(); 
} 

function pauseVid() { 
  x.pause(); 
} 
</script>

Was ist hier falsch?

Du hast eine Variable x, der etwas von rechts zugewiesen wird.

In der zweiten Zeile überschreibst du das wieder, sodass x immer die id vom Video 2 ist

Es startet immer nur das zweite Video, egal welchen Button mann klickt. Bitte helft mir!

Du müsstest eine Funktion schreiben, die ermittelt, welcher button geklickt wird.

JavaScript/DOM/Event/target

Herzliche Grüße

Matthias Scharwies

[ThomasMartini65]

Lieber Matthias, vielen Dank für deine Antwort. Ich bin jedoch nur ein Javascriptgreenhorn.

Du müsstest eine Funktion schreiben, die ermittelt, welcher button geklickt wird.

Ich bin nicht dazu fähig, Funktionen selber zu schreiben. Wäre es zu unverschämt, dich zu fragen, ob du mir konkreter helfen könntest?

Liebe, verzweifelte Grüße, Thomas

JavaScript/DOM/Event/target

[Tabellenkalk]

Hallo,

Ich bin nicht dazu fähig, Funktionen selber zu schreiben.

Naja, du hast ja schon Funktionen geschrieben. (Lies: "copygepastet") Den Vorschlag von Matthias umzusetzen, ist aber erst der zweite Schritt.

Erstmal solltest du seine Fehleranalyse nachvollziehen. Hast du das verstanden, warum du immer nur Video2 angesprochen hast?

Gruß
Kalk

[ThomasMartini65]

HalloKalk,

Ich bin nicht dazu fähig, Funktionen selber zu schreiben.

Naja, du hast ja schon Funktionen geschrieben. (Lies: "copygepastet") Den Vorschlag von Matthias umzusetzen, ist aber erst der zweite Schritt.

Erstmal solltest du seine Fehleranalyse nachvollziehen. Hast du das verstanden, warum du immer nur Video2 angesprochen hast?

Gruß
Kalk

Ich denke, ich habe noch nicht verstanden, warum ich immer nur Video2 angesprochen habe

Liebe Grüße, und es wäre sehr nett wenn du mir helfen könntest, Thomas

[Auge]

Hallo

Ich denke, ich habe noch nicht verstanden, warum ich immer nur Video2 angesprochen habe

Dein Code:

var x = document.getElementById("myVideo"); 
var x = document.getElementById("myVideo2"); 

Schritt 1:

var x = document.getElementById("myVideo");

Du weist der Variablen x das Element myVideo zu.

Schritt 2:

var x = document.getElementById("myVideo2"); 

Du überschreibst in der Variablen x den soeben zugewiesenen Wert myVideo mit myVideo2.

Somit ist binnen von Millsekunden immer myVideo2 der in x enthaltene Wert.

Tschö, Auge

[Gunnar Bittersmann]

@@ThomasMartini65

<button onclick="playVid()" type="button">Play Video</button>
<button onclick="pauseVid()" type="button">Pause Video</button> 

Wozu 2 Buttons? Wenn das Video läuft, braucht man den Play-Button nicht. Wenn das Video stoppt, braucht man den Pause-Button nicht. Das kann also ein Play/Pause-Button sein.

“Design isn’t crafting a beautiful, textured button. It’s figuring out if there’s a way to get rid of the button altogether.” —Edward Tufte

Beim Betätigen startet bzw. stoppt das Video und die Beschriftung des Buttons wechselt. ☞ Guckst du.

😷 LLAP

[ThomasMartini65]

Wozu 2 Buttons? Wenn das Video läuft, braucht man den Play-Button nicht. Wenn das Video stoppt, braucht man den Pause-Button nicht. Das kann also ein Play/Pause-Button sein.

Hallo Gunnar, vielen Dank für deine Antwort. Aber das ist doch egal, ob es ein oder zwei Buttons sind. Mein Problem ist doch, dass zwei Videos eingebunden werden sollen, und der Button jeweils das richtige Video startet.

Liebe Grüße, Thomas

[Auge]

Hallo

Wozu 2 Buttons? Wenn das Video läuft, braucht man den Play-Button nicht. Wenn das Video stoppt, braucht man den Pause-Button nicht. Das kann also ein Play/Pause-Button sein.

vielen Dank für deine Antwort. Aber das ist doch egal, ob es ein oder zwei Buttons sind. Mein Problem ist doch, dass zwei Videos eingebunden werden sollen, und der Button jeweils das richtige Video startet.

Woran das liegt, hat dir Matthias geschrieben.

Ja, für das Problem, dessentwegen du den Thread eröffnet hast, ist es tatsächlich egal, ob es einen Start- und einen Pause/Stop-Button gibt oder ob beide Funktionen auf einem Button liegen. Für eine einfache Benutzung des Features auf der Seite ist es das aber nicht.

Gunnar will dir also sagen: Wenn du Problem 1 gelöst hast, löse gleich auch Problem 2.

Tschö, Auge

[Rolf B]

Hallo Auge,

Wenn du Problem 1 gelöst hast, löse gleich auch Problem 2.

Ja, aber offenbar entstammt Thomas der Familie Xerox: ein Kopierer. Hat er relativ klar gesagt: Hilfe, schreib' das für mich, ich kann das nicht. Implizit lese ich auch heraus: und will das auch gar nicht können, statt dessen drücke ich auf die Tränendrüse („liebe, verzweifelte Grüße“) und flehe ein Forum an.

Man könnte also nun Code posten, der bei Thomas funktioniert - oder auch nicht, je nach seinem Umfeld, und bekommt dann 100 Folgefragen. Die Energie der Verschwendung, nicht des Verstehens.

Thomas, wenn ich Dir Unrecht tue, dann bedaure ich das, aber so kommst Du bei mir 'rüber. Du darfst uns gern vom Gegenteil überzeugen.

Lernhinweise:

• was sind Variablen und wie werden sie deklariert? (hier)
• was sind Funktionen? (hier)
• was ist das DOM (Dokument-Objektmodell) und was sind Events? (hier)

Rechne mit etwas Zeit, um das zu verstehen. Programmieren ist nicht leicht. Guck Dich auch im Tutorialbereich gerne noch weiter um.

Rolf

[Der Martin]

Hallo,

<button onclick="playVid()" type="button">Play Video</button>
<button onclick="pauseVid()" type="button">Pause Video</button> 

Wozu 2 Buttons? Wenn das Video läuft, braucht man den Play-Button nicht. Wenn das Video stoppt, braucht man den Pause-Button nicht. Das kann also ein Play/Pause-Button sein.

frei nach Radio Eriwan: Im Prinzip ja.
In einer Welt mit ausschließlich geübten, routinierten Nutzern.

Aber da gibt es ja auch solche mit kleinen motorischen Schwierigkeiten. Oder solche, die auch nach Jahren den Unterschied zwischen Einzel- und Doppelklick noch nicht wirklich verstanden haben.
So wie etwa meine Mutter. Wenn ihr erkläre, dass sie irgendwas anklicken soll, macht sie in den meisten Fällen reflexartig einen Doppelklick. Ein Button, der mit dem Anklicken seine Bedeutung und Funktion wechselt, ist für sie ein potentielles Ärgernis.

Beim Betätigen startet bzw. stoppt das Video und die Beschriftung des Buttons wechselt. ☞ Guckst du.

Und das, wo doch gerade du immer großen Wert auf Accessibility legst ...

Live long and pros healthy,
 Martin

[Gunnar Bittersmann]

@@Der Martin

Wozu 2 Buttons? Wenn das Video läuft, braucht man den Play-Button nicht. Wenn das Video stoppt, braucht man den Pause-Button nicht. Das kann also ein Play/Pause-Button sein.

frei nach Radio Eriwan: Im Prinzip ja.
In einer Welt mit ausschließlich geübten, routinierten Nutzern.

• video-Element in Firefox, Safari, Chrome, Edge: kombinierter Play/Pause-Button
• YouTube: kombinierter Play/Pause-Button
• Vimeo: kombinierter Play/Pause-Button

Die Welt besteht aus geübten, routinierten Nutzern.

Aber da gibt es ja auch solche mit kleinen motorischen Schwierigkeiten.

Und denen willst du zumuten, zum Wechsel von einem Button zum anderen ihre Maus/ihren Finger bewegen zu müssen?

Oder solche, die auch nach Jahren den Unterschied zwischen Einzel- und Doppelklick noch nicht wirklich verstanden haben.
So wie etwa meine Mutter. Wenn ihr erkläre, dass sie irgendwas anklicken soll, macht sie in den meisten Fällen reflexartig einen Doppelklick. Ein Button, der mit dem Anklicken seine Bedeutung und Funktion wechselt, ist für sie ein potentielles Ärgernis.

Doppelclick abfangen, d.h. der nächste wirksame Click erst x Millisekunden nach em ersten?

😷 LLAP

[Der Martin]

Hallo Gunnar,

• video-Element in Firefox, Safari, Chrome, Edge: kombinierter Play/Pause-Button
• YouTube: kombinierter Play/Pause-Button
• Vimeo: kombinierter Play/Pause-Button

Die Welt besteht aus geübten, routinierten Nutzern.

ja, überwiegend. Aber nicht ausschließlich.

Aber da gibt es ja auch solche mit kleinen motorischen Schwierigkeiten.

Und denen willst du zumuten, zum Wechsel von einem Button zum anderen ihre Maus/ihren Finger bewegen zu müssen?

Kommt drauf an. Ein leichtes Zucken im Finger, das den Play-Button ein zweites Mal auslöst und die Wiedergabe wieder stoppt, ist ärgerlich. Wenn die Buttons nicht gar zu winzig sind, ist das Bewegen von einem zum anderen weniger kritisch.

Oder solche, die auch nach Jahren den Unterschied zwischen Einzel- und Doppelklick noch nicht wirklich verstanden haben.
So wie etwa meine Mutter. Wenn ihr erkläre, dass sie irgendwas anklicken soll, macht sie in den meisten Fällen reflexartig einen Doppelklick. Ein Button, der mit dem Anklicken seine Bedeutung und Funktion wechselt, ist für sie ein potentielles Ärgernis.

Doppelclick abfangen, d.h. der nächste wirksame Click erst x Millisekunden nach em ersten?

Ja, das ist die Königslösung. Wird aber selten so realisiert.

Live long and pros healthy,
 Martin

[Rolf B]

Hallo Martin,

(Clickverzögerung) Wird aber selten so realisiert.

Videobedienung mit einem Kombi-Button Start/Pause ist, meine ich, eigentlich gängig. Ein Immerdoppelklicker lernt das mutmaßlich sehr schnell.

Rolf

[JürgenB]

Hallo,

Doppelclick abfangen, d.h. der nächste wirksame Click erst x Millisekunden nach em ersten?

Ja, das ist die Königslösung. Wird aber selten so realisiert.

und dabei ist das recht einfach:

sortbutton.addEventListener("click", function(e) { 
  if(e.detail <= 1) tsort(sp); 
}, false);

e.detail zählt die Klicks auf das Element, und setzt den Wert nach einer vom System abhängigen Zeit zurück. Leider steht im IE11 hier nur eine 0, daher das „<=“.

Ich habe das gerade mal in den Tabellensortierer im Wiki eingebaut.

Gruß
Jürgen