Eigenes Video

Video mittels HTML5 Video-Tag in Mobirise einbinden

Eigenes Video

Klicke auf das Video um es zu starten

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.


<!-- Beginn eigenes Video Tag -->
<video id="Unterwasser" width="640" controls="controls">
    <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 -->


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;
}


Code Editor

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

Code

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

Schöne Strasse 1, Berlin

Deutschland