MediaAttachment-BBCode Betatest

  • Guten Abend,

    nachdem ich mir nun mal 2h Zeit nehmen konnte, habe ich auf vielfachen Wunsch hin einen MediaAttachment-BBCode geschrieben der es erlaubt, Mediendateien aus dem Anhang in den Beitrag (oder wo auch immer) in Form eines HTML5-Players einfügen zu können.

    Nachdem das Plugin nun von mehreren Personen erfolgreich getestet wurde, wird's Zeit für die öffentliche Beta-Phase ;) Für euch heißt das, ihr könnt das Plugin hier und jetzt herunterladen, bei euch installieren und komplett testen. Fehler, Probleme, Vorschläge bitte per PN an mich.

    Screenshot

    Zur Nutzung:

    Dieses Plugin stellt den BBCode "mattach" zur Verfügung. Damit könnt ihr Anhänge z.B. aus Forenbeiträgen in Form eines Mediaplayers einbinden.

    Obsolet

    Dazu gibt es zwei Möglichkeiten:

    1. [mattach=ID,ALIGNMENT][/mattach] - ID steht für die ID des Anhangs und mit ALIGNMENT kann optional die Ausrichtung bzw. der Textfluss bestimmt werden (left / right).

    2. [mattach][attach=ID,ALIGNMENT][/attach][/mattach] - Verhält sich im Prinzip genau so wie im obigen Beispiel, nur mit dem Unterschied, dass ihr hier einfach den attach-BBCode des WCF einsetzen könnt. Der MediaAttachment-BBCode erkennt sowohl die ID des Anhangs, als auch die Ausrichtung (falls definiert).

    Ich würde durchaus versuchen, das Ganze in Punkto Usability zu verbessern. Aber zumindest funktioniert es grundsätzlich ;)

    Ihr habt während der Installation des Plugins die Möglichkeit, optional MediaElement.js mit zu installieren. Ich empfehle dies ausdrücklich.

    Download

    Aktuellste Version hier.

    ---

    Der öffentliche Beta-Test läuft erst einmal bis Morgen. Danach sehen wir weiter ;)

    Viel Spaß beim Testen.

    Edited once, last by SoftCreatR (February 22, 2014 at 9:54 PM).

  • Hallo @SoftCreatR

    Danke das du dich um das Problem angenommen hast, sieht echt toll aus.

    Ich habe/wollte es gerade testen, aber ein Problem hat sich aufgetan. Welche Videoformate spielt der Player ab? Ich wollte es mit MP4 testen, da gings nicht.

    Kann man das noch hinzufügen?

    Danke für die Info

    Muss alles so sein wie es ist? Egal Gestern wars noch so!

  • Hallo @SoftCreatR

    Danke das du dich um das Problem angenommen hast, sieht echt toll aus.

    Ich habe/wollte es gerade testen, aber ein Problem hat sich aufgetan. Welche Videoformate spielt der Player ab? Ich wollte es mit MP4 testen, da gings nicht.

    Kann man das noch hinzufügen?

    Danke für die Info

    Das kommt darauf an, ob du Mediaelement.js verwendest, oder nicht. Siehe dazu http://mediaelementjs.com/ (Browser and Device support). Verwendest du dieses Plugin nicht, ist die Unterstützung von verschiedenen Formaten stark davon abhängig, welchen Browser du verwendest.

    ich probiere es gleich aus. Eine Frage Vorweg. Kann man es so gestalten, dass man auf eine ID verzichten kann?

    Es handelt sich hier rein um die Möglichkeit, Dateianhänge in abspielbare Medien zu verwandeln. Alles Andere ist an dieser Stelle nicht vorgesehen.

  • so, ich habs auch mal getestet. Ich hab 3 mp4 dateien hochgeladen.

    die 1. hab ich mit attach eingebunden.

    Danach hab ich die 2. mit mattach eingebunden. Dabei ist mir aufgefallen, dass er plötzlich Zeilenumbrüche mit <br> einfügt wo ich mit der Enter-Taste im Editor in die nächste Zeile gegangen bin. In den Einstellungen zum Post ist aber html deaktiviert und ich hab auch nicht im Quellcode geschrieben.

    die 3. Datei hab ich mit attach plus mattach eingebunden. Hier ist das gleiche mit dem <br>

    Die mit mattach eingebunden Videos hat er auch nicht abgespielt, obwohl es normale mp4 waren... (mediaelementjs ist natürlich schon installiert gewesen)
    Zwecks Usability, in der Dateianhangsansicht hat man 2 Buttons "löschen" und "in Text einbinden" (was er mit attach macht).
    Bei Videoformaten wäre es toll wenn noch ein 3. Button mit "als Video einbinden" da wäre

  • Das mit den Zeilenumbrüchen kann ich nicht reproduzieren. Auch ist das nichts, was von dem Plugin verursacht wird. Der Player wird innerhalb eines Div-Containers angezeigt, um die Ausrichtung zu ermöglichen. Das ist aber auch alles.

    Zwecks Usability, in der Dateianhangsansicht hat man 2 Buttons "löschen" und "in Text einbinden" (was er mit attach macht).
    Bei Videoformaten wäre es toll wenn noch ein 3. Button mit "als Video einbinden" da wäre

    Das war, was ich oben mit Verbesserung der Usability meinte. Wobei mein Ziel ist, den "in Text einbinden"-Button mit dem attach-BBCode auszutauschen, sodass der mattach-BBCode immer verwendet wird. Aber das ist leider leichter gesagt, als getan.

    Zwecks der MP4-Dateien: Ich habe das Ganze mit FLV, MP4, OGV und WEBM-Videos getestet. Außer bei OGV unter Chrome konnte ich kein Problem feststellen. Gibt es einen Link, wo ich mir das ansehen kann?

  • Wem das dennoch zu umständlich ist, der kann folgendes tun:

    • ACP -> Inhalt -> BBCodes -> BBCodes auflisten
    • [attach] auswählen
    • Auf der Optionsseite die Spalte Klassen-Name bearbeiten und wcf\system\bbcode\AttachmentBBCode ersetzen durch wcf\system\bbcode\MediaAttachmentBBCode
    • Speichern


    Für euch ändert sich an dieser Stelle gar nichts. Der attach-BBCode funktioniert nach dieser Änderung genau so, wie vorher. Der einzige Unterschied besteht darin, dass der attach-BBCode nun auch Mediendateien unterstützt.

  • Das war, was ich oben mit Verbesserung der Usability meinte. Wobei mein Ziel ist, den "in Text einbinden"-Button mit dem attach-BBCode auszutauschen, sodass der mattach-BBCode immer verwendet wird. Aber das ist leider leichter gesagt, als getan.


    Was soll daran kompliziert sein? Sobald der Upload gestartet wurde, wird der WCF.DOMNodeInsertedHandler aufgerufen, zu diesem Zeitpunkt ist das Interface bereits vollständig initialisiert. Wenn du nun mittels $('.jsButtonInsertAttachment').off('click') das Event entfernst, kannst du den Klick selbst belegen. Deine Funktion muss nur die containerID der WYSIWYG-Instanz kennen, ansonsten greift die Methode WCF.Attachment._insert() auf keine Klassen-spezifischen Felder oder Methoden zu.

    Alexander Ebert
    Senior Developer WoltLab® GmbH

  • @SoftCreatR
    Erstmal danke für Deine Mediaelement.js Umgebung und dann noch eines hinterher für den BBCode. :)
    Ich habe gerade erst die ersten Tests gemacht und kann noch nicht viel sagen. Habe nur auf die schnelle gemerkt, dass er ogg audio nicht abspielen will.

    Für mich persönlich weiß ich jetzt noch nicht, welches der besser Weg ist den HTML Code zu erzeugen. Direkt über das php Script des BBCode oder über einen Medienanbieter, wie ich es selbst schon gemacht habe.

    Ich habe mir dazu für die entsprechenden Formate jeweils Mediananbieter im ACP angelegt und dann einfach nur den Standard Media BBCode kopiert (wollte den originalen nicht verändern) und dort das Feld "Inhalt als Quelltext übernehmen" deaktiviert damit auch eingebettete attach BBCodes vorher aufgelöst werden.

    Vorteil beim Weg über den Medienanbieter sehe ich darin, dass ich dort direkt über das ACP Zugriff auf den verwendeten HTML Code für den Player habe. Und es ist immer der gleiche Code, egal ob per Attach eingebunden oder über eine Filelink URL.

    Oder ist das vielleicht auch ein Nachteil?

    Bei der gescripteten Lösung wie beim mattach BBCode könnte der Vorteil sein, dass man darüber mehr Parameter übergeben könnte.

    Auf jeden Fall eine spannende Entwicklung hier.

    Gruß
    Markus

    Edited once, last by organix (February 23, 2014 at 11:50 PM).

  • Naja, der mattach-BBCode und die Medienanbieter sind erst einmal zwei grundverschiedene Dinge. Ich werde mir erst einmal anschauen, wie sich das mit dem mattach-BBCode entwickelt. Dann sehen wir weiter :)

  • Noch ein paar Hinweise dazu, dass er bei mir einfach kein ogg abspielen will.
    Wenn das ogg File als Dateianhang hochgeladen wurde und es somit unter dem Standardspeicherort /wcf/attachments/ liegt spielt er es nicht. Kopier ich das ogg File irgendwo anders hin, dann funktioniert es.

    Also zum Beispiel:

    /wcf/attachments/7c/test.ogg : Funktioniert nicht
    /wcf/attachments/test.ogg : Funktioniert nicht
    /wcf/test.ogg : Funktioniert

    Beim mp3 Dateiformat taucht dieses Problem nicht auf.

  • @SoftCreatR

    Ich befürchte fast das betrifft weder Mediaelement.js noch den BBCode. Denn das Problem tritt auch auf wenn ich direkt HTML5 in den Editor eingebe und vorher Mediaelement.js deinstalliert habe.
    Irgendwas verhindert den Zugriff auf ogg files wenn diese irgendwo unter /wcf/attachments liegen. Ich denke mal dem Mediaelement.js ist das egal wo die Datei liegt, sofern ein Zugriff möglich ist.

    Ändere ich zum Test meinen Standspeicherort für Dateianlagen im ACP, zum Beispiel nach /wcf/uploads/ dann funktioniert es wenn direkt per Filelink oder URL auf die Datei verwiesen wird aber nicht mit dem mattach BBCode.

  • Da hab' ich nicht weit genug gedacht :) Jetzt fällt es mir wieder ein: Das Verzeichnis attachments ist logischerweise durch eine .htaccess vor Zugriffen von außen geschützt. Deswegen kann man Dateien aus diesem Verzeichnis nicht direkt verlinken/aufrufen.

  • Ich kriege es Leider garnicht hin, Ich lade die Datei hoch und drücke auf den BBcode , Wie ist das mit der nummer ?Wo sehe Ich die ?
    Ausserdem tut sich auch nichts wenn ich den namen der Datei oder so einbinde . Alles was Kommt ist in der Vorschau :
    roughnecks-germany.de/index.php/Attachment/0/der bbcode sieht folgender massen aus :

    Code
    [mattach][/mattach]

    Mit freundlichen Grüßen

    Zone-Produkte.de

    PS. Alle Beiträge vor dem 30.09.2019 sind nicht von uns.

  • @organix

    Das kann eigentlich nicht sein. Fakt ist, dass ich bei dir in der Testumgebung keinen Zugriff auf die Dateien habe, was durch die .htaccess verursacht wird. Sicher, dass das bei dir nicht einfach irgendwo im Cache liegt, o.ä.?

    @Bandito6666
    Du kannst einfach "in Text einfügen" bei der Datei anklicken. Das sähe dann so aus:

    Code
    [mattach][attach=xxx][/attach][/mattach]

    Wobei xxx für die ID steht, welche wiederum automatisch mit eingefügt wird. Achte zudem darauf, dass die Benutzergruppe(n) auch das Recht haben, den BBCode zu verwenden.

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!