[yw_youtube] Youtube-Videos als Inhaltselement

[Toflar]

Hallo zusammen!

Ich hatte es satt, immer <embed> zu den erlaubten Tags hinzuzufügen und meinen Redakteuren zu sagen, dass sie (ohne Ahnung von HTML zu haben) den <embed>-Code in ein HTML-Inhaltselement kopieren müssen, obwohl ich dieses für sie doch am liebsten gar nicht erst zugänglich gemacht hätte.

Also hab ich mich an meine erste Erweiterung gesetzt.

yw_youtube

• Bindet Youtube-Videos als Inhaltselement bequem ein
• Bietet die Möglichkeit für die Grössenanpassung und einen Beschrieb zum Video
• Fügt automatisch <embed> zu den erlaubten Tags hinzu
• Ähnliche Videos
• Automatisches Abspielen beim Laden der Seite
• Automatisches Wiederholen des Videos
• Rahmen und dazugehörige Farbeinstellungen
• Auswählbare Startsekunde des Videos
• Vollbild
• Infos anzeigen oder nicht (Videotitel usw.)
• HD

Verfügbare Sprachen:

• Deutsch
• Englisch

Extension Repository:
https://contao.org/erweiterungsliste...000009.de.html

Getestete Versionen:
2.7

Tickets:
http://dev.typolight-forge.org/proje...youtube/issues

Viel Spass damit

[Sawyer]

Kann dir das ER gerne erklären. Schreib mir einfach ne Mail wenn du nen Account hast. Ich beschreibe dir das dann, wobei es eigentlich sehr einfach ist.

MFG Sawyer

[Toflar]

So, Extension ist jetzt im Repository verfügbar - hoffe richtig

[klaschatx]

Moin,

wird zwar im ER angezeigt und lässt sich installieren - aber genau letzteres funktioniert dann doch nicht. Mein FTP-Programm zeigt mir, dass nach der Installation einfach die zip-Datei im Module-Ordner liegt und nix weiter; auch neue DB-Felder werden nicht angelegt. Folgerichtig bietet das Backend dann auch keine youtube-Videos an.

Musst du wohl noch mal ran gehen?

Danke und Grüße
klaschatx

[Toflar]

Neuer Build ist da, sorry...eben genau dieser Schritt wird in der Doku nicht beschrieben...tja
Sollte jetzt funktionieren

[klaschatx]

Ok, funktioniert jetzt :-)

Nette Erweiterung. Besonders gefällt mir das Feature, das Video über die Ausrichtung im Text (also der Beschreibung) wie z. B. ein Bild in einem Textelement ausrichten zu können. Das fehlt bei anderen Erweiterungen zum Teil.

Danke und Grüße
klaschatx

[Toflar]

Danke für die Blumen

[minstyle]

Sehr gute Erweiterung.
Es wäre noch schön, wenn man die Videos direkt in hoher Auflösung in seiner Website einbinden könnte.

Hier ein Artikel zu diesem Thema:
http://helmschrott.de/blog/youtube-v...nbinden-howto/

Vielleicht kannst du diese Funktion noch in deine Erweiterung implementieren...

Dann ist mir noch folgender Fehler in deiner Erweiterung aufgefallen:
Die Ausgabe des Quelltextes ist leider nicht XHTML-konform...

falsch (aktuell):

<param name="movie" value="http://www.youtube.com/v/HeB9JXfd2LQ"></param>

richtig:

<param name="movie" value="http://www.youtube.com/v/HeB9JXfd2LQ" />

Folgender Artikel könnte dir dabei weiterhelfen:
http://dciwam.de/faq/html/flash-einbinden

Könntest du den Fehler bitte noch fixen?

[Toflar]

Hi

Alles notiert. Version 1.1.0 kommt sobald ich Zeit hab (aber noch diese Woche) - bis dahin kannst du den gravierenden xhtml Fehler ja im Template beheben

[minstyle]

Das Template muss folgendermaßen aussehen, damit es XHTML-valide ist:

<!-- indexer::stop -->
<div class="<?php echo $this->class; ?> block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>
    <?php if ($this->headline): ?>
    <<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>>
    <?php endif; ?>
    <div class="ce_yw_youtube_movie"<?php if ($this->float): ?> style="<?php echo $this->float; ?>"<?php endif; ?>>
    <object type="application/x-shockwave-flash" data="<?php echo $this->youtubelink; ?>" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="<?php echo $this->width; ?>" height="<?php echo $this->height; ?>">
        <param name="movie" value="<?php echo $this->youtubelink; ?>" />
        <param name="allowFullScreen" value="true" />
        <param name="allowscriptaccess" value="always" />
        <param name="wmode" value="transparent" />
          </object>
    </div>
    <?php echo $this->description; ?>
</div>
<!-- indexer::continue -->

Damit du weniger Arbeit hat

[Toflar]

Hmm danke, aber du hast jetzt nirgendwo <embed>...und scheinbar braucht es beides, damit es cross-Browser fähig ist

[minstyle]

Nein, das ist so nicht korrekt.
Dieser Quelltext ist cross-Browser-optimiert und zudem XHTML-valide.

Der Inhalt von <embed> befindet sich jetzt nämlich im <object>-Tag.
Einfach mal googlen

Jetzt fehlen nur noch die extra Variablen, um YouTube Filme zukünftig automatisch in besserer Qualität anschauen zu können.

[Toflar]

Bitte testen, bevor ich das ganze als "stable" ins Repo hochlade

[Toflar]

Okay, nach Rücksprache per PM noch einmal eine neue Version.

Auswahl jetzt von:

• normale Qualität
• HQ - Hohe Qualität
• HD - High Definition, Beste Qualität

Danke für's Testen

[Toflar]

Voilà, scheinbar war HQ veraltet.

Neue Version ist im Repository verfügbar.
Viel Spass und nicht vergessen zu bewerten

[minstyle]

perfekt!
Danke.

Die anderen ZIP-Dateien hier würde ich aber noch löschen

[Toflar]

Die Checkbox "Normale Qualität" ist jetzt aber überflüssig, oder?

Spielt keine Rolle. Standardmässig wird eh normale Qualität angewählt und da es Radiobuttons sind, kann man eh nur eine Auswahl treffen.

So mache ich den Endnutzer gleich noch darauf aufmerksam, dass, wenn er nichts unternimmt, sein Video nicht in HD angezeigt wird.
Mir gefällt's so besser

[m-werk]

Hallo,

ich muss sagen, tolle Erweiterung. DANKE.

Eine Frage hätte ich da noch.

Ich habe 3 Videos. Jetzt möchte ich nicht 3 Elemente erstellen, wo dann das Video drinn ist.

Gibt es eine Möglichkeit, dass z.B. links 3 kleine Buttons mit den Videos sind und wenn ich dann auf den Link klicke, dass es dann im Fenster erscheint, so dass ich nur ein Element verwende?

[Toflar]

Eine Art Playlist oder wie muss ich das verstehen? :P

[m-werk]

Hallo,

ja, so eine art Playlist. (wie eben auf der youtube-seite)

Ich könnte mir das so vorstellen, dass man im Backend einstellen kann, wieviele Videos angezeigt werden sollen und dann dementsprechend die Codes von Youtube eintragen die zu den Videos gehören. Dann könnte man eine Playlist anzeigen lassen mit den Videos (kleine Bilder) und wenn man dann auf eines der Bilder klickt, dann kommt das Video in Großformat.

Dabei müsste man auch im Backend aber einen Standart definieren, so dass das große Video nicht leer ist.

Ich hoffe, ich habe mich verständlich ausgedrückt.

[Toflar]

Hmmm...sind das nicht einfach related Videos die Youtube generiert innerhalb des Players?

Ich wüsste nicht, dass sich das selber definieren lässt.
Kenne Youtube aber zu wenig, um diese Frage selbst zu beantworten...

Anyone?

[m-werk]

Hi,

ich kenne YouTube auch noch zu wenig, aber ich habe mich gestern mal registriert und dann eine Favoritenliste angelegt.

Da ich nun dort einen eigenen Account (was vielleicht voraussetzung sein sollte) habe, kann ich meine Favoritenliste aufrufen. Da habe ich 3 Videos drinn und wenn ich eines dieser 3 anklicke, erscheint dann auch das Video.

Vielleicht könnte man was mit dieser Favoritenliste anstellen?

Man müsste das eventuell als Eigenständiges Modul für TL umbauen, so dass der persönliche Account (Favoritenliste und Video) im TL eingebunden ist.

Ich weiss nur nicht, wie dies funktionieren könnte. Ich habe nur diese Vorstellung.

[Toflar]

Naja also den Player bindest du ja von Youtube ein und der erwartet natürlich gewisse Parameter nach der URL...wie bei HD z.B. youtube.com/v/blabla&hd=1

Könnte vielleicht möglich sein, wenn Youtube diese Funktion bietet...wie gesagt, ich kenne es nicht.
Wenn du genauere Informationen dazu hast, können wir über die Implementierung reden

[Toflar]

So meine lieben Leute von heute!

Ich habe mich an die Version 2.0.0 gewagt.
Gibt ein paar neue Features, nachzulesen hier: http://dev.typolight-forge.org/issues/show/457

Folgendes muss noch gemacht werden vor der Veröffentlichung:

• Betatester sollen das Ding prüfen (bitte PM an mich mit Mailaddy, wer Lust hat!)
• Doku schreiben im Wiki auf typolight-forge.org und zwar in DE und EN (Wer gerne mithelfen möchte, ist herzlich willkommen!)

Bin leider erst am Montag Nachmittag wieder da, von daher werde ich die Beta erst dann verschicken können.

Bis dahin, meldet euch bitte
Jau! Danke!

[Graf Typo]

Hallo Yanick,

habe gerade erstmals deine Extension ausprobiert, vielen Dank dafür!

Kann ich irgendwo den Abstand des Videos zu seinem umfließenden Text angeben? Das Video-DIV selbst per CSS zu stylen ist ja nicht so günstig, da das nicht die verschiedenen Float-Optionen abdeckt. Oder den Fall, das Video ganz ohne Text einzubinden. Statt dessen wäre es schön, bei einem Float zusätzlich den Abstand (bzw. die jeweils sinnvollen zwei Abstände) eingeben zu können.

Dazu gleich noch eine Frage: Ein "float: left;" soll bei mir zum Beispiel immer den Zusatz "margin-right: 10px;" bekommen. Wenn ich als Admin meine Redakteure nicht damit behelligen will, was muss ich in welchem Template ändern, um solche Abstände als Default zu definieren?

Bin noch TL-Anfänger, und von PHP verstehe ich so gut wie gar nix ...

Danke,
der Graf

[m-werk]

Hallo Yanick,

deine Erweiterung ist echt toll.

Ich habe ja oben weiters mal geschrieben, ob es irgendwie möglich sei, eine persönliche Playlist anzuzeigen.

So, nun habe ich folgende Info:
Es ist schon möglich, eine Playlist aufzurufen. Ich habe mich bei Youtube registriert und dann eine Playlist erstellt. Das funktioniert eigentlich ganz einfach.

Weiters habe ich nun eine HTM-Seite erstellt und die Playlist dort eingebunden. Dannach habe ich einfach einen neuen Artikel erstellt und dort Als Elemelt HTML ausgewählt und die html-Seite mittels iframe eingebunden.

Ich habe mir dann mal deinen Code angesehen. In der Datei "Content_yw_Youtube.php hast du in der Zeile 105 den Link drinn mit .../v/...

Anstelle von V kommt ein P hinein und wenn man eine Playliste in Youtube erstellt, wird auch ein Key erstellt. Den muss man dann nur noch einbauen.

Dies könntest du doch auch noch zusätzlich einbauen, oder?

Bei weiteren Fragen bzw. der html-Datei bitte PN.

[m-werk]

So, ich habe nun mit deinem Code folgenden Test gemacht.

Ich habe einfach im BE anstelle des Videocodes den Code von der Playlist eingegeben.

Dannach habe ich in jener Datei wie oben beschrieben, anstelle des "v" ein "p" hineingegeben.

Und es funktioniert.

Du müsstest nur noch im Backend das noch so dazubauen, dass man auswählen kann ob man ein einzellnes Video (welches dann mit V) oder eine Playlist, (welches dann mit P) anzeigen möchte.

Ich könnte mir das so vorstellen, dass man eine Auswahlbox hat, bei der man anklicken kann, ob es sich um ein einzellnes Video handelt oder um eine Playlist.

Dabei bräuchte man das Feld, wo man den Code eingibt nur 1x und in der besagten Datei müsste man dann eine IF-Abfrage einbauen, damit der richtige Link herangezogen wird.

Bei der Playlist ist automatisch dann links und rechts ein vorwärts bzw. rückwärtsbutton und oberhalb der zeitleiste sehe ich dann alle Videos, welche ich in meiner Playlist habe.

Ich habe für eine Partei eine Seite gebaut, die dies so haben wollten. Da funktioniert es jetzt recht gut.

[Toflar]

Hi m-werk

Tönt interessant.
Wäre eine Angelegenheit für's Ticketsystem.
Bitte möglichst kurz und prägnant beschreiben, dann hat's gute Chancen im nächsten Release mit von der Partie zu sein

[frank]

Hallo Yanick,

Danke für die tolle Erweiterung. Funktioniert in IE7 und IE8 sowie Opera prima. Leider in FF3.53 nicht. Dort wird mir der Player gar nicht angezeigt. Woran mag das liegen?

Beste Grüße, Frank

[Toflar]

Hi Frank

Ich arbeite ausschliesslich mit FF und bin da immer auf der neusten Version unterwegs. Hatte bis jetzt keine Probleme...

Findest du's raus?

[m-werk]

Hallo, ich schließe mich Toflar an.

Ich habe auch keine Probleme mit dem FF 3.5.3

@Toflar: Wie sieht es eigentlich mit meiner zusätzlichen Erweiterung aus? Bei mir läuft diese schon seit längerem ohne Probleme.

Bis wann ca. hast du die Playliste übernommen?

[Toflar]

m-werk: Da es sich um ein Feature und nicht um einen Bug handelt, kommt das einfach in einer nächsten Version.

Momentan habe ich privat andere Prioritäten und zudem noch eine neue Erweiterung in der Pipeline

[frank]

Hallo Yanick,

hatte wohl nen Brett vorm Kopf. Der Flashplayer war gar nicht installiert!!!
Funktioniert alles wunderbar – natürlich auch im FF!

Grüße, Frank

[Toflar]

Hi Frank, kann passieren - kein Problem

Prima also

[Toflar]

Extension ist jetzt TL 2.8 ready!

[osterwaldi]

Guten Abend Toflar,

leider geht es mir so wie Yanick, nur dass bei mir da Video in keinem meiner Browser angezeigt wird (IE 7.0 , Opera 4.0.3 und FF 3.5.5). Der Flashplayer ist installiert.
Meine TL-Version ist 2.7.2.

Hast Du eine Idee an was das liegen könnte?

[Toflar]

Hi osterwaldi

Äh wie das gleiche Problem wie Yanick? Ich bin Yanick und ich hab keine Probleme

Hast du die 2.0.1 installiert, die ist nämlich für die Version 2.8 gedacht und setzt evtl. auf mootools-Teile, die bei der 2.7.2 noch nicht dabei waren.

Wenn du mir eine URL dazu posten würdest, könnte ich dir allerdings genaueres sagen

Ansonsten deinstallier mal die 2.0.1 und installier die 2.0.0

[osterwaldi]

Hallo Yanick,

sorry ich meinte eigentlich Frank.

Ich werd es mal mit der 2.0.0 versuchen und geb Dir hier dann eine Rückmeldung.


Gruß
Michael

[osterwaldi]

Hi Yanick,

ich habe jetzt die 2.0.0 installiert. Leider funktioniert es bei mir immer noch nicht. Was mach ich falsch?

Hier der Link zu meiner Seite

So sieht der erstelle Code aus:

<div class="mod_article block" id="links-badminton">
<!-- indexer::stop -->
<div class="mod_yw_youtube block">
        <div class="ce_yw_youtube_movie">
    <object type="application/x-shockwave-flash" data="http://www.youtube.com/v/W71aeOYS9I8&amp;rel=1&amp;color1=0x000000&amp;color2=0xffffff&amp;showinfo=1" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="" height="">
        <param name="movie" value="http://www.youtube.com/v/W71aeOYS9I8&amp;rel=1&amp;color1=0x000000&amp;color2=0xffffff&amp;showinfo=1" />
        <param name="allowFullScreen" value="true" />

        <param name="allowscriptaccess" value="always" />
        <param name="wmode" value="transparent" />
          </object>
    </div>
    </div>
<!-- indexer::continue -->
</div>

[sq......]

hi, also mit mac-safari wird das video angezeigt ...