ce_player_colorbox - Videogalerie in der Colorbox

Da ich nach einer Lösung gesucht habe um Videos vom eigenen Server mit einem Klick auf ein Vorschaubild in einer Colorbox zu öffnen, dazu aber nicht das Passende gefunden habe, habe ich es kurzerhand selbst versucht und es scheinbar auch hinbekommen ;)

Verbesserungsvorschläge (wahrscheinlich ist es nicht nötig, den Javascript-Teil jedes Mal aufzurufen ..), Links zu anderen Lösungen, Kritik und Lob werden gern entgegengenommen ;)

Das Video startet automatisch, wenn sich die Colorbox öffnet, beim Klick auf die vor- und zurück-Buttons wird das Video angehalten und das nächste Video wird geladen und ebenfalls automatisch gestartet. Beim Schließen der Colorbox wird das Video auch gestoppt. Natürlich müssen im Theme jquery und die Colorbox aktiviert sein.
Je Video muss ein Video-Element erstellt, ein Vorschaubild hinzugefügt und das Template ce_player_colorbox geladen werden (so habe ich es jedenfalls genannt).

Ich habe es nicht in 100 Browsern probiert, im aktuellen Firefox läuft es jedenfalls, ob es responsive ist habe ich noch nicht getestet, reiche aber meine Umsetzung dazu nach falls nötig.

Als Vorlage genommen habe ich aus Contao 4.9.2 das Template ce_player und hier ist meine modifizierte Version dazu, vielleicht kann es außer mir ja noch jemand gebrauchen:

PHP-Code:

---

<?php $this->extend('block_unsearchable'); ?>

<?php $this->block('content'); ?>

<script>
    $(document).ready(function(){
        var videolink = $("#videolink-<?= $this->id ?>");
        var video = $("#video-<?= $this->id ?> video");
        videolink.colorbox({
            current: "Video {current} / {total}",
            inline:true, 
            href: video, 
            rel: 'videos',
            transition:"fade",
            onComplete: function() {
                $("#id-<?= $this->id ?>")[0].play();
            },
            onClosed: function() {
                $("#id-<?= $this->id ?>")[0].pause();
            }
        });
        $('#cboxPrevious, #cboxNext').on('click', function() {
            $('video')[0].pause(); // da immer nur ein Video in der Colorbox aktiv ist und Videos nur hier geladen werden sollen, brauchen wir auch nur dieses eine Video hier pausieren
        });
    });
</script>

<a href="#" id="videolink-<?= $this->id ?>"><img src="<?= $this->poster ?>" alt="<?= $file->title ?>"></a>
<?php if ($this->caption): ?>
 <figcaption class="caption"><?= $this->caption ?></figcaption>
<?php endif; ?>

<div id='video-<?= $this->id ?>' class="videos" style="display:none">
 <figure class="<?= $this->containerClass ?>">
   <?php if ($this->isVideo): ?>
     <video<?= $this->size ?><?php if ($this->preload): ?> preload="<?= $this->preload ?>"<?php endif; ?> <?= implode(' ', $this->attributes) ?> id="id-<?= $this->id ?>">
       <?php foreach ($this->files as $file): ?>
         <source type="<?= $file->mime ?>" src="<?= $file->path.$this->range ?>" title="<?= $file->title ?>">
       <?php endforeach; ?>
     </video>
   <?php else: ?>
     <audio<?php if ($this->preload): ?> preload="<?= $this->preload ?>"<?php endif; ?> <?= implode(' ', $this->attributes) ?>>
       <?php foreach ($this->files as $file): ?>
         <source type="<?= $file->mime ?>" src="<?= $file->path ?>" title="<?= $file->title ?>">
       <?php endforeach; ?>
     </audio>
   <?php endif; ?>
   <?php if ($this->caption): ?>
     <figcaption class="caption"><?= $this->caption ?></figcaption>
   <?php endif; ?>
 </figure>
</div>

<?php $this->endblock(); ?>

---

um es responsive zu machen, habe ich noch eine globale Javascriptdatei erstellt und darin folgenden Code verwendet:
(den Codeschnipsel habe ich von https://stackoverflow.com/a/18397974 etwas umgeschrieben für die Videos, der Code wird außerdem einmal bei window.load aufgerufen)

PHP-Code:

---

(function($) {
    $(window).on('resize orientationchange', function() {
        var myWidth = 960, percentageWidth = .95;       
        if ($('#cboxOverlay').is(':visible')) {         
            $.colorbox.resize({ width: ( $(window).width() > ( myWidth+20) )? myWidth : Math.round( $(window).width()*percentageWidth ) });
            $('video').css( {
                width: $('#cboxLoadedContent').innerWidth(),
                height: 'auto'
            });
            $('#cboxLoadedContent').height( $('video').height() );
            $.colorbox.resize();
        }
    })
})(jQuery); 


---

Weitere Suchbegriffe: modal, popup, lightbox, videos