Video-Popup

[stobi_de]

So, und da haben wir wieder einen neuen Fehler mit Video-Popup
Vor einiger Zeit hatten wir ja festgestellt, dass der Ton an bleibt nach schließen des Popups mit Video.
Zen2Cool hatte da ein Javascript gebaut. Das Beispiel hat Tommy verfeinert.
Es beruht aber darauf, dass dem Video eine ID mitgegeben wird, welchen über das JS dann gestoppt wird.
Nun hat Mobi beschlossen, dass diese ID gelöscht werden muss!

Hier der Code innerhalb von Mobi

Code: Alles auswählen

<div mbr-video class="video-block mbr-figure" mbr-if="popupContentType == 3" >
                                <iframe  src="https:///www.fallprotectionengineering.eu/video/XSP_Promovideo_XSRail.mp4?wmode=transparent&autohide=1&egm=0&hd=1&iv_load_policy=3&modestbranding=1&muted=0&rel=0&showinfo=0&showsearch=0&loop=0&autoplay=0" id="videoFrame"></iframe>
                        </div>

Hier das, was erzeugt wird

Code: Alles auswählen

<div class="video-block mbr-figure"><video style="width:100%" controls autoplay muted loop playsinline><source src="https:///www.fallprotectionengineering.eu/video/XSP_Promovideo_XSRail.mp4?wmode=transparent&amp;autohide=1&amp;egm=0&amp;hd=1&amp;iv_load_policy=3&amp;modestbranding=1&amp;muted=0&amp;rel=0&amp;showinfo=0&amp;showsearch=0&amp;loop=0&amp;autoplay=0"/></video></div>

Gebe ich nun direkt das Video ein

Code: Alles auswählen

<video style="width:100%" controls autoplay playsinline id="videoFrame">
<source src="https:///www.fallprotectionengineering.eu/video/XSP_Promovideo_XSRail.mp4?wmode=transparent&amp;autohide=1&amp;egm=0&amp;hd=1&amp;iv_load_policy=3&amp;modestbranding=1&amp;muted=0&amp;rel=0&amp;showinfo=0&amp;showsearch=0&amp;loop=0&amp;autoplay=0"/></video>

machen die Superstars von Mobi was völlig anderes draus, auch mit einem anderen Video

Code: Alles auswählen

<div class="video-block mbr-figure"><iframe class="mbr-embedded-video" data-src="https://www.youtube.com/embed/uNCr7NdOJgw?rel=0&amp;amp;&amp;showinfo=0&amp;autoplay=0&amp;loop=0" width="1280" height="720" frameborder="0" allowfullscreen></iframe></div>

Hinweis: das geht nur, wenn man als Popup-Inhalt BILD eingibt und an der Stelle dann das (video) einträgt. Brrr....

[Tommy Herrmann]

Moin,

welches Popup meinst Du jetzt? Den Popup-Builder mit Video oder eines der Video-Popup Blöcke von Mobirise?

Das Video hier (4. Kachel) im Thema "BusinessM4" im Popup-Builder schließt vollkommen mit v5.7.0:

https://www.mobirise-tutorials.com/Busi ... tures11-6e

Besser Du zeigst mal Deine Problemseite und benennst Mobirise-Version, Thema und Block.

[stobi_de]

Ich habe hier den normalen Popupbuilder benutzt, Theme AgencyM4, 5.7.2
https://www.fallprotectionengineering.e ... ipment.php
Im Block "Horizontale Schienensysteme"

Ich soll wegen Youtube-Gedöhns alles zu lokalen Videos machen.

Da das Projekt online ist, habe ich hier jetzt das Video via Codeedi eingebaut mit dem Video-Tag.
Im Popupbuilder wurde Inhalt auf Bild gestellt.
Wenn hier Video eingetragen wird und die Adresse des lokalen Videos, dann spielt der Ton halt weiter nach dem Schließen und mittels den Zen2Cool-JS kann der nicht abgestellt werden, weil die ID gelöscht wird von Mobi - bzw. das ganze Video-Konstrukt komplett geändert wird.

[Tommy Herrmann]

Moin,

... ich habe das gerade mal ausprobiert - allerdings mit v5.7.0 - denn die v5.7.2 BETA ist ja total fehlerhaft wegen der nicht funktionierenden Anker-Links - sprich IDs.

Hier mal mein Beispielseite:

https://www.mobirise-tutorials.com/Tutorials/

> das geht insofern nicht mit der URL zum eigenen MP4 Video mit der Modal-Option "Video", da ja ein eigenes MP4 Video bereits im Hintergrund (ohne Modal) seinen Ton abspielen würde (logisch), denn es hat ja keinen Player.

> also muss man ein Video-Tag mit Player einbauen, was ich so getan habe:

Ich habe im Popup-Modal für den "Content" (Inhalt) > "None" (nichts) gewählt:

Ich habe mein Video-Tag unter dem Text eingefügt, dem ich auch eine id="myVideo" für das JavaScript gegeben habe:

Code: Alles auswählen

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

Nun ist das Problen, dass beim Schließen alles weiter läuft. Also habe ich den Klick auf den Hintergrund unterbunden, indem ich diese Bootstrap-Anweisung mit an das "Modal" geschrieben habe:

data-bs-backdrop="static"

Nun musste ich noch ein kleines JavaScript in die Seiteneinstellungen in den Bereich "Ende of <body> code" schreiben, mit dem ich das Video beim Schließen am Button "Beenden" und am zum Schließen pausiere:

Code: Alles auswählen

<script> 
    var vid = document.getElementById("myVideo"); 
    function pauseVid() { 
      vid.pause(); 
    } 
</script> 

Jetzt füge ich jeweils am Button "Beenden" mit meiner zusätzlichen Bootstrap-Schließen-Anweisung data-bs-dismiss="modal" und am zum Schließen noch diesen onClick-Befehl, der sich auf die id="myVideo" in der Funktion "pauseVid" aus dem JavaScript oben bezieht, hinzu:

onclick="pauseVid()"

[Tommy Herrmann]

Ich habe inzwischen ein Tutorial mit erweiterten Möglichkeiten zum Thema "Eigenes MP4 Video im Popup-Builder" geschrieben:

https://www.mobirise-tutorials.com/Tuto ... Popup.html

... unter anderem auch das Stoppen vom Video beim Klick auf den Webseiten-Hintergrund.

[stobi_de]

Du bist fleißig
Dank Dir, war ja fast nur für mich.

[Tommy Herrmann]

Moin,

das wollte ich ohnehin schon lange machen - hatte nur nicht mehr daran gedacht.

Das kann ja auch so nicht über die Mobirise-Blöcke funktionieren, denn bei eigenen MP4 Videos gibt es ja gar keinen "Player" - wie z.B. bei "YouTube".

Wenn man sich den fertigen Block als "User-Block" dann speichert ist das auch sehr einfach mit anderen Videos zu verwenden.