Contao-Camp 2024
Ergebnis 1 bis 7 von 7

Thema: Audio/Video in Lightbox abspielen - mit Bordmitteln

  1. #1
    Gesperrt
    Registriert seit
    15.06.2009.
    Ort
    Embu, Kenya
    Beiträge
    125
    Partner-ID
    254

    Standard 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:
    1. Die Umsetzung soll nach Möglichkeit mit Bordmitteln erfolgen.
    2. Es soll für Redakteure einfach handzuhaben sein.
    3. Das Content-Element Video/Audio soll zum Abspielen verwendet werden, da man hiermit mehrere Formate browserübergreifend anbieten kann.
    4. Die Lightbox soll sich an die jeweilige Größe eines Videos abpassen.
    5. Die Lighbox soll responsive sein.
    6. Wenn sich die Lightbox öffnet, soll die Mediendatei automatisch abgespielt werden.
    7. 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
    Geändert von Harry (17.01.2020 um 16:12 Uhr)

  2. #2

  3. #3
    Gesperrt
    Registriert seit
    15.06.2009.
    Ort
    Embu, Kenya
    Beiträge
    125
    Partner-ID
    254

    Standard

    Danke Dir für den Link, Stefan. Es gibt da gute Anregungen. Nur bleibt die Frage, wie man das mit der moo_mediabox umsetzt. Das entsprechende Template sie so aus:
    Code:
    <?php
    
    // Add the mediabox style sheet
    $GLOBALS['TL_CSS'][] = 'assets/mediabox/css/mediabox-black.min.css|static';
    
    ?>
    
    <script src="<?= $this->asset('js/mediabox.min.js', 'contao-components/mediabox') ?>"></script>
    <script>
      window.addEvent('domready', function() {
        var $ = document.id;
        $$('a[data-lightbox]').mediabox({
          // Put custom options here
          clickBlock: false
        }, function(el) {
          return [el.href, el.title, el.getAttribute('data-lightbox')];
        }, function(el) {
          var data = this.getAttribute('data-lightbox').split(' ');
          return (this == el) || (data[0] && el.getAttribute('data-lightbox').match(data[0]));
        });
        $('mbMedia').addEvent('swipe', function(e) {
          (e.direction == 'left') ? $('mbNextLink').fireEvent('click') : $('mbPrevLink').fireEvent('click');
        });
      });
    </script>
    Man müsste jetzt hier ein eventuell existierendes Video/Audio beim Aufruf starten und einen Close-Event hinzufügen, der ein möglicherweise gerade laufendes Video/Audio stoppt.

  4. #4
    Contao-Nutzer
    Registriert seit
    07.05.2014.
    Beiträge
    23

    Standard

    Hallo,

    ich habe alles wie beschrieben umgesetzt, allerdings wird in der Lightbox ein Link "Download File" angezeigt.
    Wenn ich draufklicke, schließt sich die Lightbox und das Audio (mp3) wird im Ursprungsfenster angezeigt.

    Wie kann ich anstatt dem "Download File" den Player in der Lightbox darstellen?

    Ich benutze Contao 3.5.35.
    MooTool ist aktiviert, moo_mediabox angeklickt, jQuery mit j_mediaelement aktiviert
    Layout auf die Seite angewendet und geändertes Template ce_player auf Inhaltselement Video/Audio angewendet.


    Sandra

  5. #5
    Gesperrt
    Registriert seit
    15.06.2009.
    Ort
    Embu, Kenya
    Beiträge
    125
    Partner-ID
    254

    Standard

    Hallo Sandra,

    jQuery (dann mit j_colorbox ) wäre eine Alternative zu mootools.
    Ich würde nicht jQuery und mootools aktivieren. Versuche also mal, jQuery zu deaktivieren.

    Gruß
    Harry

  6. #6
    Contao-Nutzer
    Registriert seit
    07.05.2014.
    Beiträge
    23

    Standard

    Hallo,

    wenn ich MooTools deaktiviere, funktioniert der Player nicht mehr.

    Wenn ich z.b. mit dem Bild-Element arbeite und dort "Neues Fenster/Großansicht" auf das Audio setze, öffnet sich ein neues Fenster - aber nicht die Colorbox.

    Wenn ich mit einem HTML-Code die Colorbox starte und dem Link als ahref das Audio mitgebe, öffnen sich Hyroglyphen - als könne in der jQuery-Colorbox keine Audiodateien aufgerufen werden.

    Ich möchte auf ein Lautsprecher-Icon klicken und dann sollte die Audio abgespielt werden.
    Gibt es ggf. noch eine andere Lösung?

  7. #7
    Gesperrt
    Registriert seit
    15.06.2009.
    Ort
    Embu, Kenya
    Beiträge
    125
    Partner-ID
    254

    Standard

    So wie Du es beschreibst, hast Du im Seitenlayout sowohl mootools als auch jQuery aktiviert. Das ist nicht empfehlenswert. Man sollte sich nach Möglichkeit für eines entscheiden. Also:

    Entweder jQuery + j_colorbox oder MooTools + moo_mediabox

    Mein Beispiel hier basiert auf MooTools. Deshalb habe ich Dir empfohlen, jQuery zu deaktivieren. Nun schreibst Du: "wenn ich mootools deaktiviere...".

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •