Hintergrund Video - Versionsgeschichte

Ainschy: /* j_mediaelement anpassen */

2015-03-31T21:47:49Z

‎j_mediaelement anpassen

Ainschy am 31. März 2015 um 21:46 Uhr

2015-03-31T21:46:33Z

Ainschy: /* j_mediaelement anpassen */

2015-03-31T21:45:49Z

‎j_mediaelement anpassen

Ainschy: Wie ein Hintergrund Video voll flächig einsetzt wird.

2015-03-31T21:42:02Z

Wie ein Hintergrund Video voll flächig einsetzt wird.

Neue Seite

'''Wie ihr mit dem <video> Element in HTML5 Hintergrund Videos realisiert'''
== Der HTML-Code ==
Um ein Hintergrund Video vollflächig einzusetzen kommt ihr nicht um hin die fe_page zu erweitern. Hierzu wird ein sogenannter Container eingefügt. Dieser hilft später beim ausrichten des Videos, der Inserttag erleichtert die spätere Bearbeitung im Backend. (Die eckige Klammern beim Inserttag sind zu entfernen!)

<source><body ...>
<div id="bgvideo">{[{]insert_module::hintergrund_video[}]}</div>
<?php $this->block('body')...></source>

Legt als nächstes das Modul "hintergrund_video" als HTML Modul an.
<source><video class="no-mejs" autoplay loop muted poster="files/layout/images/ALTERNATIVES-BILD.jpg">
<source src="files/layout/video/VIDEO_IM_MP4-FORMAT.mp4" type="video/mp4">
<source src="files/layout/video/VIDEO_IM_WEBM-FORMAT.webm" type="video/webm">
<img src="files/layout/images/ALTERNATIVES-BILD.jpg" width="1920" height="1080">
</video></source>

Das Video sollten in den Formaten mp4 und webm vorliegen, ein Fallback-Bild für Browser die das Video-Element nicht unterstützen wird empfohlen.

== Der CSS Code ==

<source>
#bgvideo {
bottom:0;
left:0;
right:0;
top:0;
position:fixed;
overflow:hidden;
background: 50% 50% no-repeat;
background-size: cover;
}
#bgvideo video {
min-width:100%;
min-height:100%;
left:50%;
top:50%;
position:absolute;
display:inline-block;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
</source>

== j_mediaelement anpassen ==
Legt ein eigenes j_mediaelement.html5 unter Templates an, kopiert hierzu das existierende Template j_mediaelement.html5 und ändert es wie unter stehend ab. Erweitert werden die Angaben um videoWidth: 100%, und videoHeight: 100% z.B. das Inhaltselement Youtube wird auf 100% Breite und entsprechender Höhe ausgedehnt. Für das Hintergrund Video ist das nicht wichtig aber für Responsive Webseiten unverzichtbar. Für das Hintergrund Video ist hingeben die Angabe <source>$('video:not(.no-mejs),audio:not(.no-mejs)').mediaelementpla...</source> wichtig, da die Klassen Anweisung im Video Tag an dieser Stelle dafür sorgt das jQuery unser Hintergrund Video ignoriert.

<source>
...
<script>
(function($) {
$(document).ready(function() {
$('video:not(.no-mejs),audio:not(.no-mejs)').mediaelementplayer({
// Put custom options here
videoWidht: '100%',
videoHeight: '100%',
pluginPath: '<?php echo TL_PATH; ?>/assets/jquery/mediaelement/<?php echo $GLOBALS['TL_ASSETS']['MEDIAELEMENT']; ?>/',
flashName: 'legacy/flashmediaelement.swf',
silverlightName: 'legacy/silverlightmediaelement.xap'
});
});
})(jQuery);
</script>
...
</source>

@@ Zeile 45: / Zeile 45: @@
 == j_mediaelement anpassen ==
-Legt ein eigenes j_mediaelement.html5 unter Templates an, kopiert hierzu das existierende Template j_mediaelement.html5 und ändert es wie unter stehend ab. Erweitert werden die Angaben um videoWidth: 100%, und videoHeight: 100% damit wird z.B. das Inhaltselement Youtube auf 100% Breite und entsprechender Höhe ausgedehnt. Für das Hintergrund-Video ist das nicht wichtig aber für Responsive Webseiten unverzichtbar. Für das Hintergrund-Video ist hingeben die Angabe <source>$('video:not(.no-mejs),audio:not(.no-mejs)').mediaelementpla...</source> wichtig, da die Klassen-Anweisung im Video-Tag an dieser Stelle dafür sorgt das jQuery unser Hintergrund-Video ignoriert.
+Legt ein eigenes j_mediaelement.html5 unter Templates an, kopiert hierzu das existierende Template j_mediaelement.html5 und ändert es wie unter stehend ab. Erweitert werden die Angaben um videoWidth: 100%, und videoHeight: 100% damit wird z.B. das Inhaltselement Youtube auf 100% Breite und entsprechender Höhe ausgedehnt. Für das Hintergrund-Video ist das nicht wichtig aber für Responsive Webseiten unverzichtbar. Für das Hintergrund-Video ist hingeben die Angabe
 <source>

@@ Zeile 1: / Zeile 1: @@
-'''Wie ihr mit dem <video> Element in HTML5 Hintergrund Videos realisiert'''
+'''Wie ihr mit dem <video>-Element in HTML5 Hintergrund-Videos realisiert'''
 == Der HTML-Code ==
-Um ein Hintergrund Video vollflächig einzusetzen kommt ihr nicht um hin die fe_page zu erweitern. Hierzu wird ein sogenannter Container eingefügt. Dieser hilft später beim ausrichten des Videos, der Inserttag erleichtert die spätere Bearbeitung im Backend. (Die eckige Klammern beim Inserttag sind zu entfernen!)
+Um ein Hintergrund-Video vollflächig einzusetzen kommt ihr nicht um hin die fe_page zu erweitern. Hierzu wird ein sogenannter Container eingefügt. Dieser hilft später beim ausrichten des Videos, der Inserttag erleichtert die spätere Bearbeitung im Backend. (Die eckige Klammern beim Inserttag sind zu entfernen!)
 <source><body ...>