Du bist nicht angemeldet. Der Zugriff auf einige Boards wurde daher deaktiviert.

#1 22. April 2014 19:41

brandy
Server-Pate
Registriert: 05. Juni 2011
Beiträge: 803
Webseite

[GELÖST] Youtubeplayer

Hallo!

Ich möchte mit HIlfe des Moduls "Youtubeplayer" einige Videos auf meiner Seite darstellen.
Ich würde es gerne in etwa ala Youtube darstellen - ein großes Video in der Mitte der Seite plus den restlichen rechts daneben.
Klickt man auf ein Video rechts sollte im Bereich des großen in der Mitte angezeigt werden.

Ich verwende zwei Templates:

Nummer 1 (zur Auflistung):

{foreach from=$itemlist item="item"}
<div class="large-12 columns" {if $item->is_selected}class="active"{/if}>{$item->detaillink}
<br />
<a href="{$item->detailurl}">
<img src="http://img.youtube.com/vi/{$item->videoid}/1.jpg" border="0" alt="{$item->name}" title="{$item->name}"> 
</a>
</div>
{/foreach}

und Nummer 2 (zur Anzeige):

<div class="flex-video">
<!--<h3>{$item->name}</h3>
<p>{$labels->videoid}: {$item->videoid}</p>
<p>{$labels->description}: {$item->description}</p>-->
<object width="480" height="500"><param name="movie" value="http://www.youtube.com/v/{$item->videoid}?rel=0&fs=1&loop=0"></param><param name="wmode" value="transparent"></param><param name="allowFullScreen" value="true"><embed src="http://www.youtube.com/v/{$item->videoid}?rel=0&fs=1&loop=0" allowfullscreen="true" type="application/x-shockwave-flash" wmode="transparent" width="425" height="500"></embed></object>
</div>

Was ich jetzt nicht schaffe, ist, dass er mir das Video im gleichen Bereicht lädt.
Ich hab schon probiert ein Template zu erstellen, dass beides übernimmt - leider endet das in einer Endlosschleife!

Habt ihr da eine Idee?
Vielen Dank!

Beitrag geändert von brandy (22. April 2014 19:41)

Offline

#2 23. April 2014 19:24

Klenkes
Server-Pate
Ort: 89428 Syrgenstein
Registriert: 17. Dezember 2010
Beiträge: 1.437

Re: [GELÖST] Youtubeplayer

Ich hab' mich schon lange nicht mehr mit den alten CTLMM Modulen und Parametern beschäftigt, aber das Prinzip ist folgendes:
Du musst mit einer Detailansicht starten, und am Ende der Detailtemplate das Modul mit der Listfunktion aurufen.

In deinem Contentblock rufts du z.B. ein Video im Detail auf:

{cms_module module="youtubeplayer" alias="video-2"}

Damit wird die Detailtemplate aufgerufen.

Detailtemplate:

<h3>{$item->name}</h3>
<p>{$labels->videoid}: {$item->videoid}</p>
<p>{$labels->description}: {$item->description}</p>
<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/{$item->videoid}?rel=0&fs=1&loop=0"></param><param name="wmode" value="transparent"></param><param name="allowFullScreen" value="true"><embed src="http://www.youtube.com/v/{$item->videoid}?rel=0&fs=1&loop=0" allowfullscreen="true" type="application/x-shockwave-flash" wmode="transparent" width="425" height="344"></embed></object>

{cms_module module="youtubeplayer"}

In einem kurzen Test probiert und es funktioniert mit is_selected und Allem.

Klar, blöd, welches Video soll man am Anfang aufrufen?
Vielleicht hilft ein Query um das Neueste zu finden...

Beitrag geändert von Klenkes (23. April 2014 19:25)

Offline

#3 23. April 2014 19:56

brandy
Server-Pate
Registriert: 05. Juni 2011
Beiträge: 803
Webseite

Re: [GELÖST] Youtubeplayer

Hallo Klenkes!

Vielen Dank - soweit hab ich es schon mal:
Link

Aber wie öffne ich nun bei Klick auf einem kleinen Bild das Video oben im Player - ist das irgendwie möglich?

Danke!

Offline

#4 24. April 2014 22:13

Klenkes
Server-Pate
Ort: 89428 Syrgenstein
Registriert: 17. Dezember 2010
Beiträge: 1.437

Re: [GELÖST] Youtubeplayer

Das ist merkwürdig. Funktioniert bei mir wunderbar und so wie du es willst.
Bei dir fehlt drunter nur die Liste.

Wie rufst du das Modul auf?
Wie sieht deine Template dazu aus?

Hast du in den Modulsettings evtl. inline anghakt?

Offline

#5 24. April 2014 07:04

brandy
Server-Pate
Registriert: 05. Juni 2011
Beiträge: 803
Webseite

Re: [GELÖST] Youtubeplayer

Hallo Klenkes!

Aufgerufen wird das ganze so:

{cms_module module="youtubeplayer" finaltemplate="videoseite" limit="1"}

Und das Template dazu:

<div class="flex-video">
<!--<h3>{$item->name}</h3>
<p>{$labels->videoid}: {$item->videoid}</p>
<p>{$labels->description}: {$item->description}</p>-->
<object width="480" height="500"><param name="movie" value="http://www.youtube.com/v/{$item->videoid}?rel=0&fs=1&loop=0"></param><param name="wmode" value="transparent"></param><param name="allowFullScreen" value="true"><embed src="http://www.youtube.com/v/{$item->videoid}?rel=0&fs=1&loop=0" allowfullscreen="true" type="application/x-shockwave-flash" wmode="transparent" width="425" height="500"></embed></object>
</div>
{cms_module module="youtubeplayer"}

Offline

#6 24. April 2014 08:08

Klenkes
Server-Pate
Ort: 89428 Syrgenstein
Registriert: 17. Dezember 2010
Beiträge: 1.437

Re: [GELÖST] Youtubeplayer

Könnte es sein, dass das Template "videoseite" NICHT als Standard für die Detaildarstellung festgelegt ist?

Offline

#7 24. April 2014 08:18

brandy
Server-Pate
Registriert: 05. Juni 2011
Beiträge: 803
Webseite

Re: [GELÖST] Youtubeplayer

Gut, das wäre das Mal...
Ich habs jetzt umgestellt - beim Video auf der Startseite bekomm ich jetzt aber auf die Liste unten angezeigt?
Wie stelle ich das um, dass er mir das Template "startseite" nimmt?

Offline

#8 24. April 2014 08:32

Klenkes
Server-Pate
Ort: 89428 Syrgenstein
Registriert: 17. Dezember 2010
Beiträge: 1.437

Re: [GELÖST] Youtubeplayer

Warum nicht so:

{cms_module module="youtubeplayer" finaltemplate="startseite" limit="1"}

Und im Template "startseite" die Liste eben nicht aufrufen, sondern nur das Video darstellen.
Oder verstehe ich dich falsch?

Offline

#9 24. April 2014 08:37

brandy
Server-Pate
Registriert: 05. Juni 2011
Beiträge: 803
Webseite

Re: [GELÖST] Youtubeplayer

Mein Fehler - funktioniert schon...
Danke dir wieder mal...

Offline

#10 24. April 2014 09:07

brandy
Server-Pate
Registriert: 05. Juni 2011
Beiträge: 803
Webseite

Re: [GELÖST] Youtubeplayer

Eine Frage hab ich noch:
Der Youtubeplayer wird ja auf der Seite "Video" geladen - klicke ich jetzt auf ein anderes Video öffnet er mir das Video richtigerweise mit meinem Template - das Problem: Der Inhalt der Seite (in diesem Fall die Überschrift "Video") wird nicht mit übernommen, da die ja auf der Seite und nicht im Template steht. Ich habs schon mit "detailpage" probiert - funktioniert aber nicht...

Offline

#11 24. April 2014 09:33

Klenkes
Server-Pate
Ort: 89428 Syrgenstein
Registriert: 17. Dezember 2010
Beiträge: 1.437

Re: [GELÖST] Youtubeplayer

Das Problem hierbei ist, dass wenn du die Liste mit inline="1" aufrufst, hast du zwar die Überschrift(und allen Inhalt) aus dem Contentblock aber damit auch das zuerst aufgerufene Video. Und das ist blöd.

Also bleibt dir nur:
1. Die Überschrift ganz oben zuerst im Detailtemplate setzen?
2. oder ins Seitentemplate

Offline

#12 24. April 2014 09:39

NaN
Moderator
Ort: Halle (Saale)
Registriert: 09. November 2010
Beiträge: 4.437

Re: [GELÖST] Youtubeplayer

Wie wäre es eigentlich mit einer Javascript-Lösung für die Video-Seite?
Video-Template:

<div class="large-12 columns">
    <div class="large-7 columns">
        
        <!-- Der Link zum Javascript kann auch in den Head der jeweiligen Seite -->
        <script src="//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script> 
        
        <!-- Der Flash-Player -->
        <div class="flex-video" id="ytplayer-temp">You need Flash player 10.1 (or higher) and JavaScript enabled to view this video.</div>
        
        <!-- Das Javascript zum Laden der Videos nach Klick auf das Vorschaubild -->
        <script>
            /*
            * YouTube: Control Embedded Player With JavaScript API
            * http://salman-w.blogspot.com/2009/05/embed-multiple-youtube-videos-in-your.html
            */
            swfobject.embedSWF(
                "http://www.youtube.com/v/{$itemlist[0]->videoid}?enablejsapi=1&rel=0&fs=1",
                "ytplayer-temp",
                "480",
                "360",
                "10.1",
                false,
                false,
                { allowScriptAccess: "always", allowFullScreen: "true" },
                { id: "ytplayer" }
            );
            function ytplayer_loadvideo(link, id) {
                var o = document.getElementById("ytplayer");
                if (o) {
                    o.loadVideoById(id);
                    $('.videolink.active').removeClass('active');
                    $(link).parent().addClass('active');
                }
            }
        </script>

    </div>
    <div class="large-5 columns">
            
        <!-- Die Liste mit den Videos -->
        <ul class="videolist">
            {foreach from=$itemlist item="item"}
            <li class="videolink{if $item->is_selected} active{/if}">
                {$item->detaillink}<br/>
            
                <!-- onclick-Event zum Link mit Vorschaubild hinzufügen -->
                <a href="{$item->detailurl}#ytplayer-temp" onclick="ytplayer_loadvideo(this, '{$item->videoid}');return false;">
            
                    <img src="http://img.youtube.com/vi/{$item->videoid}/default.jpg" border="0" alt="{$item->name}" title="{$item->name}" width="130" height="97" /> 
                </a>
            </li>
            {/foreach}
        </ul>
        
    </div>
</div>

Module: GBFilePicker, AdvancedContent
Sicherheit: Beispiel .htaccess-Datei
CMSms 1.12 unter PHP 7:
cmsms-1.12.3.zip (inoffiziell - komplett inkl. Installer)
CMSms 1.12 unter PHP 8:
cmsms-1.12.4.zip (inoffiziell - komplett inkl. Installer)

Offline

#13 24. April 2014 10:22

brandy
Server-Pate
Registriert: 05. Juni 2011
Beiträge: 803
Webseite

Re: [GELÖST] Youtubeplayer

Wo bau ich das hin?
Copy/Paste reicht anscheinend nicht*g*

Offline

#14 24. April 2014 10:29

NaN
Moderator
Ort: Halle (Saale)
Registriert: 09. November 2010
Beiträge: 4.437

Re: [GELÖST] Youtubeplayer

Einfach ein neues Template im Youtubeplayer-Modul anlegen und den Code da einfügen.
Ich habs als Standard Video-Template ausgewählt.


Module: GBFilePicker, AdvancedContent
Sicherheit: Beispiel .htaccess-Datei
CMSms 1.12 unter PHP 7:
cmsms-1.12.3.zip (inoffiziell - komplett inkl. Installer)
CMSms 1.12 unter PHP 8:
cmsms-1.12.4.zip (inoffiziell - komplett inkl. Installer)

Offline

#15 24. April 2014 10:37

Klenkes
Server-Pate
Ort: 89428 Syrgenstein
Registriert: 17. Dezember 2010
Beiträge: 1.437

Re: [GELÖST] Youtubeplayer

An eine Ajaxlösung dachte ich auch schon.
Yepp! Hinterher kann es  jeder sagen wink

Es funktioniert mit {$item->videoid}

swfobject.embedSWF(
  "http://www.youtube.com/v/{$item->videoid}?enablejsapi=1&rel=0&fs=1",
...

{$itemlist[0]->videoid} gibt nichts zurück weil es das Detailtemplate ist.

Beitrag geändert von Klenkes (24. April 2014 10:40)

Offline

#16 24. April 2014 10:43

Klenkes
Server-Pate
Ort: 89428 Syrgenstein
Registriert: 17. Dezember 2010
Beiträge: 1.437

Re: [GELÖST] Youtubeplayer

Ich fasse es für brandy nochmal zusammen:

Detailtemplate:

<div class="large-12 columns">
    <div class="large-7 columns">

        
        <!-- Der Link zum Javascript kann auch in den Head der jeweiligen Seite -->
        <script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script> 
        
        <!-- Der Flash-Player -->
        <div class="flex-video" id="ytplayer-temp">You need Flash player 10.1 (or higher) and JavaScript enabled to view this video.</div>
        
        <!-- Das Javascript zum Laden der Videos nach Klick auf das Vorschaubild -->
        <script>
            /*
            * YouTube: Control Embedded Player With JavaScript API
            * http://salman-w.blogspot.com/2009/05/embed-multiple-youtube-videos-in-your.html
            */
            swfobject.embedSWF(
                "http://www.youtube.com/v/{$item->videoid}?enablejsapi=1&rel=0&fs=1",
                "ytplayer-temp",
                "480",
                "360",
                "10.1",
                false,
                false,
                { allowScriptAccess: "always", allowFullScreen: "true" },
                { id: "ytplayer" }
            );
            function ytplayer_loadvideo(link, id) {
                var o = document.getElementById("ytplayer");
                if (o) {
                    o.loadVideoById(id);
                    $('.videolink.active').removeClass('active');
                    $(link).parent().addClass('active');
                }
            }
        </script>

    </div>

{cms_module module="youtubeplayer"}

Listtemplate:

    <div class="large-5 columns">
            
        <!-- Die Liste mit den Videos -->
        <ul class="videolist">
            {foreach from=$itemlist item="item"}
            <li class="videolink{if $item->is_selected} active{/if}">
                {$item->detaillink}<br/>
            
                <!-- onclick-Event zum Link mit Vorschaubild hinzufügen -->
                <a href="{$item->detailurl}" onclick="ytplayer_loadvideo(this, '{$item->videoid}');return false;">
            
                    <img src="http://img.youtube.com/vi/{$item->videoid}/default.jpg" border="0" alt="{$item->name}" title="{$item->name}" width="130" height="97" /> 
                </a>
            </li>
            {/foreach}
        </ul>
        
    </div>
</div>

Die Templates müssen jeweils als Standard gesetzt werden.

Offline

#17 24. April 2014 10:48

NaN
Moderator
Ort: Halle (Saale)
Registriert: 09. November 2010
Beiträge: 4.437

Re: [GELÖST] Youtubeplayer

{$itemlist[0]} gibt nichts zurück.

Kommt drauf an wie man das Modul aufruft.
Das Beispiel war als Video-Template gedacht.
Nicht als Detail-Template.
Im Video-Template gibt nämlich {$item->videoid} außerhalb der Foreach-Schleife nichts zurück.
Im Detail-Template macht es natürlich mehr Sinn mit {$item->videoid} und einem gesonderten Modul-Aufruf für die Liste zu arbeiten.

Ist halt die Frage was genau man erreichen will.
Ich habe in meinem Beispiel nur mit einem Template gearbeitet, nicht mit zweien.

Man könnte bei einem einzigen Template auch vorher prüfen, ob {$item} bzw. {$item->videoid} existiert, wenn ja, dann {$item->videoid} als Standard-Video verwenden, wenn nicht, prüfen ob {itemlist} bzw. {$itemlist[0]->videoid} existiert und dann das erste Element mit {$itemlist[0]->videoid} wählen.

Wenn beides nicht existiert, läuft sowieso irgendwas falsch.


Module: GBFilePicker, AdvancedContent
Sicherheit: Beispiel .htaccess-Datei
CMSms 1.12 unter PHP 7:
cmsms-1.12.3.zip (inoffiziell - komplett inkl. Installer)
CMSms 1.12 unter PHP 8:
cmsms-1.12.4.zip (inoffiziell - komplett inkl. Installer)

Offline

#18 24. April 2014 11:05

brandy
Server-Pate
Registriert: 05. Juni 2011
Beiträge: 803
Webseite

Re: [GELÖST] Youtubeplayer

Ich habs jetzt noch nicht hinbekommen - muss mir das zu Hause nochmal anschauen - danke vorerst mal...
Der Vorteil aus dieser Variante wäre, dass er nicht jedesmal die Seite neu lädt, oder?

Offline

#19 24. April 2014 11:06

Klenkes
Server-Pate
Ort: 89428 Syrgenstein
Registriert: 17. Dezember 2010
Beiträge: 1.437

Re: [GELÖST] Youtubeplayer

NaN schrieb:

{$itemlist[0]} gibt nichts zurück.

Kommt drauf an wie man das Modul aufruft.
Das Beispiel war als Video-Template gedacht.
Nicht als Detail-Template.

Da hast du vollkommen recht.
Deine 1 Templatelösung ist deutlich besser.

Wenn man diese Template als Listtemplate aufruft funktioniert das $itemlist[0]->videoid auch.
Z.B.

{cms_module module="youtubeplayer" listtemplate="video-template"}

Offline

#20 24. April 2014 11:10

Klenkes
Server-Pate
Ort: 89428 Syrgenstein
Registriert: 17. Dezember 2010
Beiträge: 1.437

Re: [GELÖST] Youtubeplayer

brandy schrieb:

Ich habs jetzt noch nicht hinbekommen - muss mir das zu Hause nochmal anschauen - danke vorerst mal...
Der Vorteil aus dieser Variante wäre, dass er nicht jedesmal die Seite neu lädt, oder?

Das Video aus der Liste ersetzt das bereits geladene Video, und dein Inhalt aus dem Contenblock bleibt davon unberührt.
Und die Seite wird nicht neu geladen.

Offline

#21 24. April 2014 11:15

NaN
Moderator
Ort: Halle (Saale)
Registriert: 09. November 2010
Beiträge: 4.437

Re: [GELÖST] Youtubeplayer

Hier nochmal die 1-Template-Variante sowohl für Detail- als auch Video-Template:

{if (isset($item) && is_object($item) && isset($item->videoid)) || (isset($itemlist) && is_array($itemlist) && isset($itemlist[0]->videoid))}

<div class="large-12 columns">

    <div class="large-7 columns">
        
        <!-- Der Link zum Javascript kann auch in den Head der jeweiligen Seite -->
        <script src="//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script> 
        
        <!-- Der Flash-Player -->
        <div class="flex-video" id="ytplayer-temp">You need Flash player 10.1 (or higher) and JavaScript enabled to view this video.</div>
        
        <!-- Das Javascript zum Laden der Videos nach Klick auf das Vorschaubild -->
        <script>
            /*
            * YouTube: Control Embedded Player With JavaScript API
            * http://salman-w.blogspot.com/2009/05/embed-multiple-youtube-videos-in-your.html
            */
            swfobject.embedSWF(
                "http://www.youtube.com/v/{if isset($item) && is_object($item) && isset($item->videoid)}{$item->videoid}{elseif isset($itemlist) && is_array($itemlist) && isset($itemlist[0]->videoid)}{$itemlist[0]->videoid}{/if}?enablejsapi=1&rel=0&fs=1",
                "ytplayer-temp",
                "480",
                "360",
                "10.1",
                false,
                false,
                { allowScriptAccess: "always", allowFullScreen: "true" },
                { id: "ytplayer" }
            );

            function ytplayer_loadvideo(link, id) {
                var o = document.getElementById("ytplayer");
                if (o) {
                    o.loadVideoById(id);
                    // funktioniert nur wenn, jquery verwendet wird
                    if(typeof $ != 'undefined') {
                        $('.videolink.active').removeClass('active');
                        $(link).parent().addClass('active');
                    }
                }
            }
        </script>

    </div>

{if isset($itemlist) && is_array($itemlist) && count($itemlist)}

    <div class="large-5 columns">

        <!-- Die Liste mit den Videos -->
        <ul class="videolist">

            {foreach from=$itemlist item="item"}

            <li class="videolink{if $item->is_selected} active{/if}">
                {$item->detaillink}<br/>

                <!-- onclick-Event zum Link mit Vorschaubild hinzufügen -->
                <a href="{$item->detailurl}" onclick="ytplayer_loadvideo(this, '{$item->videoid}');return false;">

                    <img src="http://img.youtube.com/vi/{$item->videoid}/default.jpg" border="0" alt="{$item->name}" title="{$item->name}" width="130" height="97" /> 
                </a>
            </li>

            {/foreach}

        </ul>
    </div>

{/if}

</div>

{/if}

Deine 1 Templatelösung ist deutlich besser.

Würd ich so pauschal nicht sagen.
Wie gesagt, es kommt drauf an was man am Ende erreichen will.
Es kann Situationen geben, wo es durchaus sinnvoller ist, mit mehreren Templates zu arbeiten.


Module: GBFilePicker, AdvancedContent
Sicherheit: Beispiel .htaccess-Datei
CMSms 1.12 unter PHP 7:
cmsms-1.12.3.zip (inoffiziell - komplett inkl. Installer)
CMSms 1.12 unter PHP 8:
cmsms-1.12.4.zip (inoffiziell - komplett inkl. Installer)

Offline

#22 24. April 2014 12:23

brandy
Server-Pate
Registriert: 05. Juni 2011
Beiträge: 803
Webseite

Re: [GELÖST] Youtubeplayer

Gut, ich werd mal die zwei Teile von Klenkes einbauen...
Wie sieht dann der Aufruf aus - ich geb ja aktuell ein Template vor...

Offline

#23 24. April 2014 14:45

brandy
Server-Pate
Registriert: 05. Juni 2011
Beiträge: 803
Webseite

Re: [GELÖST] Youtubeplayer

Ich hab gleich noch eine Frage:
Gibt es beim Modul Youtubeplayer ein Funktion ala News - wo ich sagen kann er soll mir erst Videos ab einer gewissen Nummer anzeigen?
Ich möchte nämlich unter Video rechts zwei, eventuell drei, Videos anzeigen lassen. Da hät ich zB gesagt limit=2 start=1 - dann hät ich unterhalb noch eine Zeile gemacht, wo ich gesagt hätte er soll mit dem 3. Video starten und kein Limit, sodass er es einfach anzeigt welche noch da sind!

Vielen Dank!

Offline

#24 25. April 2014 09:21

Klenkes
Server-Pate
Ort: 89428 Syrgenstein
Registriert: 17. Dezember 2010
Beiträge: 1.437

Re: [GELÖST] Youtubeplayer

Youtubeplayer hat leider keine solche Funktion. Das kannst du aber prima mit Smarty Properties wie @index und/oder @iteration innerhalb der foreach Schleife machen.

Lesestoff

Offline

#25 25. April 2014 12:07

brandy
Server-Pate
Registriert: 05. Juni 2011
Beiträge: 803
Webseite

Re: [GELÖST] Youtubeplayer

Habs mit @index gelöst - Vielen Dank euch beiden!

Offline