Hintergrund Video: Unterschied zwischen den Versionen
Aus Contao Community Documentation
(→j_mediaelement anpassen) |
(→j_mediaelement anpassen) |
||
| (Eine dazwischenliegende Version von einem Benutzer wird nicht angezeigt) | |||
| 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 == | == 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 ...> | <source><body ...> | ||
| Zeile 45: | Zeile 45: | ||
== j_mediaelement anpassen == | == 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>$('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> | <source> | ||
Aktuelle Version vom 31. März 2015, 22:47 Uhr
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!)
<body ...>
<div id="bgvideo">{[{]insert_module::hintergrund_video[}]}</div>
<?php $this->block('body')...>Legt als nächstes das Modul "hintergrund_video" als HTML Modul an.
<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>
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
#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%); }
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
$('video:not(.no-mejs),audio:not(.no-mejs)').mediaelementpla...
wichtig, da die Klassen-Anweisung im Video-Tag an dieser Stelle dafür sorgt das jQuery unser Hintergrund-Video ignoriert.
...
<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>
...
