Audio/Video in Lightbox abspielen - mit Bordmitteln
Hallo Contao-Gemeinde,
nach längerer Pause habe ich mich nochmal mit Contao befasst. Dabei bin ich auf ein Thema gestoßen, dass zwar ausgiebig hier im Forum behandelt wird, mir aber dennoch nicht alle Antworten liefert. Es ist das Abspielen von Audios/Videos in einer Lightbox.
Ausgangssituation: Auf einer Website sollen die Titel von Audios bzw. Videos in einer Liste angezeigt werden. Bei Klick auf einen Listeneintrag soll die entsprechend hinterlegte Mediendatei in einer Lightbox abgespielt werden.
Anforderungen:
- Die Umsetzung soll nach Möglichkeit mit Bordmitteln erfolgen.
- Es soll für Redakteure einfach handzuhaben sein.
- Das Content-Element Video/Audio soll zum Abspielen verwendet werden, da man hiermit mehrere Formate browserübergreifend anbieten kann.
- Die Lightbox soll sich an die jeweilige Größe eines Videos abpassen.
- Die Lighbox soll responsive sein.
- Wenn sich die Lightbox öffnet, soll die Mediendatei automatisch abgespielt werden.
- Wenn die Lightbox geschlossen wird, soll die eventuell laufende Mediendatei gestoppt werden.
Zu Anforderung 1: Für die Umsetzung mit Bordmitteln habe ich mich für die moo_mediabox entschieden.
Zu Anforderung 2: Um es redakteurfreundlich zu halten, habe ich das Template ce_player.html5 angepasst. Für jeden Medientyp wird hier ein Hyperlink vorgeschaltet, der den auf der Seite per "display: none;" unsichtbar gemachen Code-Block für die Mediendatei lädt.
HTML-Code:
<?php $this->extend('block_unsearchable'); ?>
<?php $this->block('content'); ?>
<?php if ($this->isVideo): ?>
<div class="ce_hyperlink block">
<a href="#mb_<?= $this->id ?>" class="hyperlink_txt" title="<?= $this->headline ?>" data-lightbox="<?= $this->size ?>"><?= $this->headline ?></a>
<div style="display: none;">
<div id="mb_<?= $this->id ?>">
<figure class="<?= $this->containerClass ?>">
<video<?= $this->size ?><?php if ($this->poster): ?> poster="<?= $this->poster ?>" preload="<?= $this->preload ?>"<?php endif; ?> <?= implode(' ', $this->attributes) ?>>
<?php foreach ($this->files as $file): ?>
<source type="<?= $file->mime ?>" src="<?= $file->path.$this->range ?>" title="<?= $file->title ?>">
<?php endforeach; ?>
</video>
<?php if ($this->caption): ?>
<figcaption class="caption"><?= $this->caption ?></figcaption>
<?php endif; ?>
</figure>
</div>
</div>
</div>
<?php else: ?>
<div class="ce_hyperlink block">
<a href="#mb_<?= $this->id ?>" class="hyperlink_txt" title="<?= $this->headline ?>" data-lightbox="400 40"><?= $this->headline ?></a>
<div style="display: none;">
<div id="mb_<?= $this->id ?>" class="cboxElement">
<figure class="<?= $this->containerClass ?>">
<audio preload="<?= $this->preload ?>" <?= implode(' ', $this->attributes) ?>>
<?php foreach ($this->files as $file): ?>
<source type="<?= $file->mime ?>" src="<?= $file->path ?>" title="<?= $file->title ?>">
<?php endforeach; ?>
</audio>
<?php if ($this->caption): ?>
<figcaption class="caption"><?= $this->caption ?></figcaption>
<?php endif; ?>
</figure>
</div>
</div>
</div>
<?php endif; ?>
<?php $this->endblock(); ?>
Damit werden die Anforderungen 2, 3 und 4 erfüllt.
Für die Anforderung 5 (responsive) sorgt eine Zeile CSS im Media Query für kleinere Bildschirme:
Code:
#mbCenter, #mbMedia, #mbBottom{
max-width: 100%;
}
Soweit sieht alles gut aus. Die Mediendateien werden in der Lightbox geöffnet und können abgespielt werden.
Was bleibt, sind die Anforderungen 6 und 7:
6. Wie schaffe ich es, dass ein Video/Audio beim Laden in die Lightbox automatisch startet und nicht per weiteren Klick gestartet werden muss?
7. Wie stoppe ich ein Video/Audio, das gerade in der Lightbox läuft, wenn man die Lightbox schließt (es läuft nämlich munter weiter)?
Liebe Grüße
Harry
