Contao-Camp 2024
Ergebnis 1 bis 7 von 7

Thema: (gelöst) lokales Videofile in Lightbox abspielen (Bordmittel, jQuery …)

  1. #1
    Contao-Nutzer Avatar von truni
    Registriert seit
    18.08.2009.
    Ort
    Zürcher Unterland
    Beiträge
    166

    Frage (gelöst) lokales Videofile in Lightbox abspielen (Bordmittel, jQuery …)

    Wie kann man bei einem Contao 3.5.x auf einen Link eine Lightbox legen und darin ein Video-Element abspielen (ein lokales Videofile, kein YouTube-Film)? Idealerweise sollte sich der Video gleich abspielen beim Klick auf den Link … geht das mit Bordmitteln wie j_colorbox oder j_mediabox?

    Finde viele Postings, aber oft für ältere Versionen. Danke für Tipps / working Links!
    Geändert von truni (17.01.2017 um 07:40 Uhr)

  2. #2
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.703
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Schau dir am besten die Docu von colorbox oder mediabox advanced an. Dort müsste stehen, wie man Videos in der Lightbox abspielen kann. Ich meine, in der mediabox reicht es, wenn der Link auf das Video zeigt.
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  3. #3
    Contao-Nutzer Avatar von btosh
    Registriert seit
    11.12.2015.
    Beiträge
    58

    Standard

    Hallo truni,

    ich war am gleichen Thema dran. Ich habe das Video inline eingebunden.
    Dafür habe ich mir ein eigenes Inhaltselement mit Custom Elements erstellt.
    Damit kann es der Redakteur später sehr einfach anlegen. Das nur nebenbei.

    Hier der entsprechende Code:

    HTML-Code:
    $(".inline").colorbox({ 
        inline: true, 
        width: '95%', 
        maxWidth:'1280', 
        maxHeight:'750',
        onComplete: function () {
            var video_id = $(this).attr('href');
            $(video_id).find('video').get(0).play(); 
        }
    });
    maxHeight von 750 Pixel: 720 Pixel für das Video + 30 Pixel für die Controls-Leiste. Wenn Du keine Controls benötigst, bleibt es bei 720 Pixel.
    Viel Spaß damit.

  4. #4
    Contao-Nutzer Avatar von truni
    Registriert seit
    18.08.2009.
    Ort
    Zürcher Unterland
    Beiträge
    166

    Frage

    Danke btosh – kann ich deine Lösung in einer Art «mappen»*auf meine Problematik?
    Wir benötigen nur 1 Textlink, der beim Anklicken die Lightbox (wohl somit die colorbox) öffnet und inline ein contao Inhaltselement anzeigt (in diesem Fall ein Video-Element mit lokal gespeichertem Videofile). Das globale Template sollte nicht verändert werden für j_colorbox, da auf der Website auch noch normale Bildvergrösserungen zum Einsatz kommen.

    Ginge ein solcher Aufruf in einer Art wie?
    <a href="{{link::ID}}" data-lightbox="inline">Unseren Film anzeigen …</a>

    Wie hänge ich an diese Schreibweise die Konfiguration/Settings der Colorbox an?

    Danke nochmals, stehe auf dem Schlauch in der Sache …

  5. #5
    Contao-Nutzer Avatar von truni
    Registriert seit
    18.08.2009.
    Ort
    Zürcher Unterland
    Beiträge
    166

    Multimedia GELÖST: 2 Lösungsansätze

    Habe inzwischen zwei Lösungsansätze gefunden, die funktionieren. Die jQuery-Lösung ist eleganter ;-)

    01 Basis Mootols
    https://community.contao.org/de/show...ikel-verlinken

    HTML
    <a href="#mb_inline" rel="lightbox[inline 80% auto]">Link zum Öffnen der Lightbox …</a></p>
    <div id="mb_inline" style="display: none;">{{insert_content::ABCD}}</div>

    CSS (ad hoc Korrektur für responsive Breite)
    #mbCenter video { width:100%; }
    #mbCenter .ce_player { margin-bottom: 0 !important; }


    02 Basis jQuery
    https://www.marcosimbuerger.ch/conta...verwenden.html

    HTML
    <p><a class="colorbox_content cboxElement" href="#lightbox_content" data-lightbox="lb12345">Link zum Öffnen der Lightbox …</a></p>
    <div style="display: none;">
    <div id="lightbox_content">{{insert_content::ABCD}}</div>
    </div>

    JS
    j_colorbox.html5 (ergänzen mit Inline-Behandlung)
    ...
    maxWidth: '95%',
    maxHeight: '95%'
    });
    if($(this).hasClass('colorbox_content')){
    $(this).colorbox({inline:true});
    } else {
    $(this).colorbox({inline:false});
    }
    });

    CSS
    #cboxLoadedContent { background-color: #000; }
    #lightbox_content .ce_player { margin-bottom: 0 !important; }
    #lightbox_content video { width:100%; height:auto; }

  6. #6
    Contao-Nutzer Avatar von btosh
    Registriert seit
    11.12.2015.
    Beiträge
    58

    Standard

    Hi Truni,

    eigentlich ist es noch einfacher. Die Konfiguration der Lightbox definierst Du in deinem Custom jQuery-File. Die Templates von Contao kannst Du so lassen.

    Das wäre der Link zum Video:

    HTML-Code:
    <a class="inline cboxElement" href="#video_id" data-lightbox="video_id">Video abspielen</a>
    Und hier wird defniert, dass alle Links mit der Klasse inline mit folgender Colorbox-Konfiguration geöffnet werden:

    HTML-Code:
    $(".inline").colorbox({ 
        inline: true, 
        width: '95%', 
        maxWidth:'1280', 
        maxHeight:'720',
        onComplete: function () {
            var video_id = $(this).attr('href');
            $(video_id).find('video').get(0).play(); 
        }
    });
    Geändert von btosh (18.01.2017 um 10:41 Uhr)

  7. #7
    Contao-Nutzer Avatar von theMatrix
    Registriert seit
    19.09.2013.
    Ort
    Frankfurt
    Beiträge
    154

    Standard lightbox Videos lokal und extern in jQuery-Colorbox

    Ich wollte mal kurz meine Lösungsmöglichkeit mit euch teilen. Eventuell hilft einem oder anderem User weiter.

    • Ich habe das ce_hyperlink-Template dupliziert und umbenannt auf ce_hyperlink_lightbox_video.html5
    • Füge in die Link-Adresse den Embed-Links von der iframe-tag für externe Videos und für lokale Videos einfach den Pfad angeben.
    • Wenn externe Video angezeigt werden soll, setze ich in Lightbox-Feld als rel-attribute das Wort "extern", bei den lokalen Videos bleibt einfach leer.
    • Unter Template-Einstellungen beim Inhaltselement Hyperlink wähle ich mein oben erstelltes Template.


    Hier mein Templateinhalt:
    PHP-Code:
    <?php $this->extend('block_searchable'); ?>

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

    <?php
    $externVideo 
    strpos($this->attribute,'extern');
    if(
    $externVideo !== false): 
    ?>

        <a href="<?= $this->href ?>" class="external_video hyperlink_txt hyperlink_<?= $this->id ?>" title="<?= $this->linkTitle ?>"<?= $this->attribute ?><?= $this->target ?>><?= $this->link ?>
        </a>
        
        <script type="text/javascript">
        //<![CDATA[
            jQuery(window).load(function(){
                jQuery('.hyperlink_<?= $this->id ?>').colorbox({
                    iframe:true,
                    fixed:true,
                    innerWidth:'70%',
                    innerHeight:'80%'
                });
            });
        //]]>
        </script>

    <?php else: ?>

        <a href="" class="local_video hyperlink_txt hyperlink_<?= $this->id ?>" title="<?= $this->linkTitle ?>"<?= $this->attribute ?><?= $this->target ?>><?= $this->link ?>
        </a>
        <div style="display:none">
        <?php
            $videoContent 
    '<div id="local_videocontent_'.$this->id.'" class="local_videocontent"><video id="video_'.$this->id.'" width="80%" height="auto" class="video" controls><source src="'.$this->href.'" type="video/mp4"></video></div>';
            echo 
    $videoContent;
        
    ?>
        </div>
        
        <script type="text/javascript">
        //<![CDATA[
            jQuery(window).load(function(){
                jQuery('.hyperlink_<?= $this->id ?>').colorbox({
                    fixed:true,
                    width:'70%',
                    height:'80%',
                    html:'<?= $videoContent ?>'
                });
            });
        //]]>
        </script>
        
    <?php endif; ?>

    <?php $this->endblock(); ?>
    Die Screenshots habe ich ebenfalls eingefügt.
    Angehängte Grafiken Angehängte Grafiken

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
  •