Video in HTML5

Einbau vom Video

Ich habe hier lediglich einen einfachen Mobirise-Textblock, aus der Kategorie "Article", verwendet und den Beispieltext von Mobirise mit dem HTML5 Video-Tag unten ersetzt.

Heute reicht eigentlich auch nur das Format .mp4, da dieses Video-Format inzwischen von allen Browsern unterstützt wird. Ich habe hier noch beispielhaft zusätzlich das Format .ogg im Video Tag eingetragen. Wenn Ihr nur ein Format eintragen wollt, dann lasst Ihr diese zweite Zeile, mit dem .ogg Format, einfach weg.

Hier geht es zu einem Online-Converter.

Natürlich müsst Ihr Eure Videos dann händisch mit einem FTP-Programm (wie z.B. "FileZilla") in ein Verzeichnis Eurer Wahl auf den Server kopieren und dann mittels absoluter Pfadangabe im Video-Tag verlinken. So wird das Video auch gleich auf der Arbeitsseite von Mobirise angezeigt.

Natürlich kann man das eigene Video ebenso in den Popup Builder von Mobirise einbauen.

Hier das Video HTML5 Tag von meinem Beispiel, das ich in den "Code Editor" eines einfachen Textfeldes kopiert habe. Es gibt viele Attribute, die man noch an das Video-Tag schreiben kann, wie z.B.:

controls = zeigt die Player-Funktionen
loop = wiederholt das Video automatisch
autoplay = würde das Video automatisch starten
muted = Video wird stumm geschaltet

Die Attribute "autoplay" und zusätzlich "muted" eigenen sich um ein Video auch am mobilen Gerät automatisch abspielen zu lassen, siehe Beispiel unten.

Dieses HTML5 Video wird von Deinem Browser nicht unterstützt.

</video>

Hier meine CSS um das Video responsive zu machen, die ich in den Bereich "CSS Editor" vom "Code-Editor" kopiert habe:

video {

max-width: 100% !IMPORTANT;

height: auto !IMPORTANT;

}

Einbau vom Video im Popup Builder - nur für Fortgeschrittene

Man kann das eigene Video ebenso in den Popup Builder von Mobirise einbauen. Dazu verwendet ihr genau den gleichen Video-Code in dem Block vom "Popup Builder" wie oben beschrieben.

Leider wird das Video mit dem Schließen des Popups nicht beendet und läuft im Hintergrund weiter. Man müsste also zunächst das Video stoppen und dann erst das Popup-Fenster schließen.

Hierzu hat Rudy Bogemans von "zen2cool" aus Belgien, als Drittanbeter von diversen Mobirise-Blöcken, ein kleines JavaScript geschrieben, das es ermöglicht gleichzeitig am Button zum Schließen des Popup-Fensters auch das Video zu beenden.

Dieses JavaScript gehört in den Bereich "End of <body> code" der "Seiteneinstellungen":

<!-- Script by zen2cool - thank you -->
<script>
( function( d ) {
  'use strict';
   d.getElementsByClassName('closeWindow')[ 0 ].addEventListener( 'click',
      function() {
            d.getElementById('popup-video').pause();
         }, false );
 }( document ));
</script>

Dabei muss dann dem Video-Tag die im JavaScript verwendete id="popup-video" gegeben werden:

<!-- Beginn eigenes Video Tag -->
<video id="popup-video" width="640" controls="controls" loop="loop">
    <source src="http://www.mobirise-tutorials.com/BusinessM4/Videos/tauchen.mp4" type="video/mp4">
    <source src="http://www.mobirise-tutorials.com/BusinessM4/Videos/tauchen.ogv" type="video/ogg">
    Dieses HTML5 Video wird von Deinem Browser nicht unterstützt.
</video>
<!-- Ende eigenes Video Tag -->

und dem Button zum Schließen die zusätzliche class="closeWindow" aus dem JavaScript oben gegeben werden sowie die Bootstrap4-Anweisung data-dismiss="modal" (in Bootstrap5 die Anweisung data-bs-dismiss="modal") zum Schließen des Popup-Fensters:

<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 closeWindow" href="javascript: void();" data-dismiss="modal" data-app-placeholder="Type Text">Schließen</a></div>

Damit man das Popup-Fenster nicht mittels Klick auf den Hintergrund schließen kann, habe ich dem äußeren <div> mit der class="modal" noch die Bootstrap4 Anweisung data-backdrop="static" (in Bootstrap5 die Anweisung data-bs-backdrop="static") gegeben.

<div class="modal mbr-popup" tabindex="-1" role="dialog" data-backdrop="static"> ... </div>

Weiterhin habe ich den X Button zum Schließen (oben rechts) komplett entfernt, also von <button> bis </button> mit den Kommentar Zeichen

<!-- <button type="button" class="close closeWindow" data-dismiss="modal" aria-label="Close">
                        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 32 32" fill="currentColor">
                            <path d="M31.797 0.191c-0.264-0.256-0.686-0.25-0.942 0.015l-13.328 13.326c-0.598 0.581 0.342 1.543 0.942 0.942l13.328-13.326c0.27-0.262 0.27-0.695 0-0.957zM14.472 17.515c-0.264-0.256-0.686-0.25-0.942 0.015l-13.328 13.326c-0.613 0.595 0.34 1.562 0.942 0.942l13.328-13.326c0.27-0.262 0.27-0.695 0-0.957zM1.144 0.205c-0.584-0.587-1.544 0.336-0.942 0.942l30.654 30.651c0.613 0.625 1.563-0.325 0.942-0.942z"></path>
                        </svg>
</button> -->

Man könnte auch nur diesen X Button verwenden und eben dann dort, wie im auskommentierten Code oben zu sehen, die class="closeWindow" aus dem JavaScript mit ran schreiben. Dann müsste man aber den "Schließen" Button deaktivieren, denn nur eines von beiden kann auf das JavaScript reagieren.

Eigenes Video

Video mittels HTML5 Video-Tag in Mobirise einbinden

Eigenes Video

Klicke auf das Video um es zu starten

Einbau vom Video

Code Editor

Unten eine Ansicht vom Video-Tag im Code Editor und dem CSS Bereich

Eigenes Video ohne Ton

Dieses Video hat das Attribut "muted" zusätzlich im Video-Tag
und wird daher auch am mobilen Gerät automatisch abgespielt.

<video controls="controls" loop="loop" autoplay="autoplay" muted="muted">

Adresse

Links

Eigenes Video

Video mittels HTML5 Video-Tag in Mobirise einbinden

Eigenes Video

Klicke auf das Video um es zu starten

Einbau vom Video

Code Editor

Unten eine Ansicht vom Video-Tag im Code Editor und dem CSS Bereich

Eigenes Video ohne Ton

Dieses Video hat das Attribut "muted" zusätzlich im Video-Tagund wird daher auch am mobilen Gerät automatisch abgespielt.<video controls="controls" loop="loop" autoplay="autoplay" muted="muted">

Einbau vom Video im Popup Builder - nur für Fortgeschrittene

Adresse

Links

Dieses Video hat das Attribut "muted" zusätzlich im Video-Tag
und wird daher auch am mobilen Gerät automatisch abgespielt.

<video controls="controls" loop="loop" autoplay="autoplay" muted="muted">