Lokale MP4 Videos einbinden

Video mit in Phpwcms intrgrierter Variante Mediaplayer

Artikelinhalt (WYSWYG)

Der Nachteil an der integrierten Variante ist, das das Einfügen in einen Text soweit mir bekannt, nur über SHOW-CONTENT möglich wäre. Der hier zu lesende Text ist ein vom Video getrennter Artikelinhalt. Artikel-Inhalt des Videos sowie der des Textes ist mit Bootstrap col-lg-6, was zwei DIV-Container nebeneinander sind.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam

Einbinden von MP4-Videos responsive in Phpwcms

Es gibt eine Ummenge an Anleitungen zum einbinden von Videos in eine Webpage. Nachdem ich ettliche probiert habe, aber zu keinem für mich zufriedenstellenden Ergebnis gekommen bin, mußte ich feststellen, das es eigentlich ganz simpel ist, vorausgesetzt, man nutzt Bootstrap :-), denn da sind alle dazu nötigen Klassen schon definiert. 

Unter CSS Klasse noch das passende Raster (z.B. col-12 col-md-6) mit geben, und fertig.

Die Funktion "controls" bringt dann noch ein paar Features mit, wie zum Beispiel:
Vollbild, Bild in Bild, download und Airplay (bei Apple Safari).

Der Html-Code für einfaches Einbinden

<div align="center" class="center-block embed-responsive embed-responsive-16by9">
    <video controls="" class="embed-responsive-item" poster="pfad/video.jpg">
        <source src="pfad/video.mp4" type="video/mp4">
    </video>
</div>

MP4 Video im WYSWYG Artikel

Wär es nicht indealer, das Video direkt im Text platzieren zu können? Auch das ist möglich. Voraussetzung ist ein Script, welches man in template/inc_script_frontend_redner/ platziert. Als Basis habe ich das abgeänderte Standard-Script videoplayer.php genutzt. Kleiner Wermutstropfen ist, das das Script, je nachdem wo man seine Videos platziert, den Pfad im Script anpassen muss. 

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna

H1 - Beispielüberschrift

Ein kurzer Text um den Farbkontrast zu test