Frage zum Einbau von mehreren Videos mit Tommys Video-Tutorial

[Fewo]

Hallo zusammen,
jetzt habe ich eine Frage zum sehr gut beschriebenen Video-Popup von Tommy.
Link: https://www.mobirise-tutorials.com/Tuto ... Popup.html

Wenn ich ein Video als Popup einbaue und alles so wie von Tommy beschrieben eingebe funktioniert der Autostart, das Beenden und Neustart der Videodatei sehr gut. Danke für das Tutorial,

Sobald ich aber ein zweites Video in einem zweiten Poupup-Block einbinde, funktioniert es nicht mehr. Ich habe es schon mit einer anderen "video id" probiert und die scripte mit zweitem Namen unter "end of Body" eingegeben. Aber alles hat leider auch nach 5 Std. testen nicht das gewünschte Ergebnis gebracht.

Die Videos werden übrigens von einer Button-Auflistung immer mit dem Befehl onclick="playVid()" gestartet.

Aber vielleicht habt Ihr noch einen Tipp?

Viele Grüße
Helge

[Tommy Herrmann]

Moin Helge,

es ist immer hilfreich, auch mal Deine Testseite zu sehen - auch wenn diese nicht funktioniert.

Das JavaScript bezieht sich auf die ID (`getElementById`). Eine ID darf auf der gleichen Seite immer nur einmalig vorhanden sein, sonst funktioniert es nicht.

Ich selbst verwende ja auch auf dieser Beispielseite zwei Videos.

Das erste Video mit dem Wasserfall verwendet also dieses JavaScript mit der id="myVideo" mit den Funktionen `playVid()` und `pauseVid()`:

Code: Alles auswählen

  <!-- JavaScript Video 'Waterfall' Play/Pause -->
  <script> 
    var vid = document.getElementById("myVideo");
    function playVid() { 
      vid.play(); 
    } 
    function pauseVid() { 
      vid.pause(); 
    } 
  </script>

... und wird so aufgerufen, da ich diesem Video-Tag eben auch diese id="myVideo" gegeben habe:

Code: Alles auswählen

<video id="myVideo" width="90%" height="auto" poster="https://www.mobirise-tutorials.com/images/Wasser-Berge.jpg" controls loop autoplay>
  <source src="https://www.mobirise-tutorials.com/videos/Wasserfall.mp4">
    Your browser does not support the video tag.
</video>

Das zweite Video mit meinem Garten-Video verwendet also dieses JavaScript mit der id="upPopVideo". Ebenso musst Du den Funktionen im JavaScript einen anderen Namen geben. Hier also dann mit den Funktionen `playUpVid()` und `pauseUpVid()`:

Code: Alles auswählen

  <!-- JavaScript Video 'Garden' Play/Pause and start video from the beginning -->
  <script> 
    var vidUp = document.getElementById("upPopVideo");
    function playUpVid() { 
      vidUp.currentTime = 0;
      vidUp.play(); 
    } 
    function pauseUpVid() { 
      vidUp.pause(); 
    } 
  </script>

Hier starte ich das Video übrigens bei jedem Aufruf von vorne mit `vidUp.currentTime = 0;`, während das erste Video an der Stelle fortgesetzt wird, an der es unterbrochen wurde.

... und wird so aufgerufen, da ich diesem Video-Tag eben auch diese id="upPopVideo" gegeben habe:

Code: Alles auswählen

<video id="upPopVideo" width="50%" loop height="auto" poster="https://www.mobirise-tutorials.com/images/Garten-Poster.jpg" controls>
  <source src="https://www.mobirise-tutorials.com/videos/2023-im-Garten.mp4">
    Your browser does not support the video tag.
</video>

Natürlich müsstest du am Button zum "Beenden" des PopUp-Fensters auch dann diese `onClick`-Anweisung entsprechend mit der korrekten Funktion versehen, also beim zweiten Video dann so:

onclick="pauseUpVid()"

Code: Alles auswählen

<div class="mbr-section-btn" mbr-if="showButtons" data-toolbar="-mbrBtnMove" mbr-buttons mbr-theme-style="display-4"><a class="btn btn-md btn-primary" href="javascript: void();" data-bs-dismiss="modal" data-app-placeholder="Type Text" onclick="pauseUpVid()">Beenden</a></div>

[Fewo]

Hallo Tommy,
wenn nur alles, nachdem Du es hier so ausführlich erklärt hast, im Nachhinein so einfach wäre.

Vielen Dank nach Hamburg