Video-Upload zu YouTube und Vimeo mit Theme-Komponente

[ti0]

Diese neue Theme-Komponente ermöglicht das Hochladen von Videos aus dem Discourse-Composer auf YouTube und Vimeo. Für diejenigen, die mit dem kürzlich von mir entwickelten Plugin bereits vertraut sind, ist dasselbe nun in dieser Theme-Komponente verfügbar, die zu jedem Theme hinzugefügt werden kann. Dies macht die Installation deutlich einfacher und funktioniert exakt genauso wie das Plugin.

Funktionen

Alle Forenmitglieder können Videos auf Vimeo oder YouTube hochladen (Admins können entscheiden, ob eines oder beide aktiviert werden sollen).

Admins können über die Admin-Einstellungen die Sichtbarkeits- und Einbettungsprivatsphäre der auf Vimeo hochgeladenen Videos steuern.

Benutzer können die Sichtbarkeitsprivatsphäre der auf YouTube hochgeladenen Videos über das Hochlade-Modal steuern.

Sie können sich hier eine Demo des Plugins ansehen (alles ist in der Komponente identisch, außer der Einstellungsseite. Die Einstellungsseite der Komponente finden Sie unter Admin > Anpassen > Komponenten > Video-Upload):

Discourse Video Upload Plugin with YouTube and Vimeo Demo

Konfiguration

Wichtig: Bei Theme-Komponenten müssen Sie sicherstellen, dass Sie die Komponente für die auf Ihrer Instanz verwendeten Themes aktivieren (entweder durch Klicken auf Alle Themes hinzufügen oder durch Auswahl der gewünschten Themes).

Die Entwickler-Einrichtung zum Aktivieren von Uploads auf YouTube und Vimeo ist unten aufgeführt. Wenn Sie möchten, dass dies jemand für Sie erledigt, können Sie Support anfordern, indem Sie mich kontaktieren, @ti0.

Für YouTube-Uploads

YouTube-Uploads gehen auf das Konto des Uploaders, im Gegensatz zu Vimeo-Uploads, die auf ein gemeinsames Konto gehen.

Schritte anzeigen

• Erstellen Sie ein Konto und ein Projekt unter https://console.developers.google.com

• Aktivieren Sie die YouTube Data API v3

• Richten Sie den OAuth-Zustimmungsbildschirm für externe Benutzer ein (sofern nicht alle Benutzer Ihres Discourse-Forums zu einer Google-Organisation gehören).

• Richten Sie Ihre Anmeldeinformationen ein:

  • Erstellen Sie eine OAuth-Client-ID
  • Wählen Sie den Typ „Webanwendung“
  • Fügen Sie Ihre Discourse-Instanz-URL im Abschnitt „Autorisierte JavaScript-Ursprünge“ hinzu

• Kopieren Sie nur die generierte Client-ID

• Gehen Sie in der Discourse-Admin-Oberfläche zur Einstellungsseite der Komponente und fügen Sie die Client-ID im Feld youtube api client id ein.

• Aktivieren Sie YouTube-Uploads, indem Sie diese Einstellung aktivieren: youtube upload enabled

• Passen Sie bei Bedarf die Standard-Sichtbarkeitsoptionen für YouTube an.

• Sie sollten nun in der Lage sein, Videos direkt vom Discourse-Themen-Composer auf YouTube hochzuladen.

Für Vimeo-Uploads

Sobald Sie die Komponente mit den folgenden Schritten eingerichtet haben, können alle Community-Benutzer Videos auf Ihrem Vimeo-Konto hochladen.

Sie sind für die Limits und die Nutzung Ihres Vimeo-Kontos verantwortlich.

Schritte anzeigen

• Erstellen Sie ein Konto und eine App bei Vimeo Developers:
  https://developer.vimeo.com/apps/new

• Generieren Sie ein Zugriffstoken mit Upload-Berechtigungen

• Gehen Sie auf der Discourse-Admin-Oberfläche zur Einstellungsseite der Komponente, fügen Sie das generierte Zugriffstoken in die Einstellung vimeo api access token ein und speichern Sie es.

• Aktivieren Sie Vimeo-Uploads, indem Sie die Einstellung vimeo upload enabled aktivieren.

• Passen Sie die Optionen für Sichtbarkeit und Einbettung an

  • Weitere Informationen zu den Privatsphäre-Optionen finden Sie auf dieser Vimeo-Seite: privacy.view und privacy.embed

• Sie sollten nun in der Lage sein, Videos direkt vom Discourse-Themen-Composer auf Vimeo hochzuladen.

Ein Video veröffentlichen

• Um ein Video zu veröffentlichen, erstellen Sie ein neues Thema oder antworten Sie auf ein bestehendes Thema.

• Klicken Sie auf die neue Schaltfläche Zu Video hochladen in der Composer-Werkzeugleiste (das Videosymbol). Diese Schaltfläche ist nur sichtbar, wenn Sie entweder YouTube oder Vimeo (oder beide) in den Plugin-Einstellungen aktiviert haben.

• Wählen Sie eine Videodatei aus und bearbeiten Sie bei Bedarf Details wie Titel und Beschreibung.

• Klicken Sie auf die Schaltfläche „Auf Vimeo hochladen“ oder „Auf YouTube hochladen“.

  • Die angezeigten Schaltflächen hängen davon ab, ob Sie YouTube- oder Vimeo-Uploads (eines oder beide) aktiviert haben.

  • Es wird Ihnen der Upload-Fortschritt angezeigt, und dann wartet es, bis das Video den Transkodierungsprozess abgeschlossen hat.

  • Das Modal bleibt offen, bis die Transkodierung abgeschlossen ist.

  • Sobald die Transkodierung abgeschlossen ist, wird der Videolink zum Composer hinzugefügt (sofern kein Transkodierungsfehler aufgetreten ist).

• Speichern Sie den Beitrag, und Ihr Video kann von allen anderen Community-Benutzern angesehen werden (abhängig von den von Ihnen ausgewählten Privatsphäre-Optionen).

Feature-Anfragen

Sie können zusätzliche Funktionen oder Support anfordern, indem Sie mich kontaktieren @ti0.

Beiträge

Wenn Sie diese Theme-Komponente hilfreich fanden, erwägen Sie bitte, dem Entwickler über diesen PayPal-Link zu spenden: PayPal.Me

Große und kleine Beiträge sind gleichermaßen willkommen

Wenn Sie die Komponente/das Plugin erweitern möchten, sind PRs (Pull Requests) willkommen.

	Vorschau	Theme-Creator-Vorschau
	Repository	discourse-video-upload
	Installationsanleitung	So installieren Sie ein Theme oder eine Theme-Komponente
	Neu bei Discourse Themes?	Anfängerleitfaden zur Verwendung von Discourse Themes

[Canapin (Coin-coin le Canapin)]

@ti0

Das macht die Installation viel einfacher und funktioniert genau wie das Plugin.

Wird das Plugin dann eingestellt?

[ti0]

Gerade nicht, aber ich denke, es wird viel einfacher sein, nur die Theme-Komponente zu warten. Ich werde das Plugin vorerst beibehalten, empfehle jedoch die Migration zur Theme-Komponente.

[Don]

Vielen Dank @ti0 Das ist wieder großartig Es ist viel einfacher, eine Theme-Komponente als ein Plugin zu verwenden.

Eine Frage: Könntest du diese Texte zur Übersetzung hinzufügen? Hochladen, Transkodieren von Videos sowie Titel, Beschreibung und andere Videodetails? Danke!

[ti0]

@Don Alle Beschriftungen in der Komponente können jetzt angepasst werden

[Don]

Hallo

Ich mag deine Komponente wirklich sehr, danke nochmals, dass du sie erstellt hast.

Sie hat super funktioniert, aber jetzt haben wir ein paar Probleme
Manchmal tritt während der Transkodierung von Videos (nur MP4-Dateien) ein Fehler auf: status.error.transcode. Das Video wird zwar korrekt hochgeladen und ist auf Vimeo sichtbar, aber der Link wird nicht in den Editor eingefügt.

Das andere Problem ist, dass wir MP4-Dateien vom Safari-Browser auf macOS nicht hochladen können.

Ist es möglich, diese Probleme irgendwie zu lösen?

Vielen Dank für deine Antwort!

[ti0]

Hallo @Don, danke, dass du diesen Randfall bei MacOS Safari bemerkt hast. Es scheint ein Problem in Safari zu sein (ein Hinweis auf SO). Ich habe dieses Problem in der Theme-Komponente behoben. Sobald du sie aktualisierst und die Seite neu lädst, solltest du MP4-Dateien aus Safari hochladen können. Ich habe es gerade auf meinem eigenen Gerät getestet, und es funktioniert jetzt.

Was Transkodierungsfehler betrifft, so treten diese auf Vimeo-Seite auf. Es gibt keine Möglichkeit, dies auf unserer Seite zu beeinflussen.

[Don]

Vielen Dank für die schnelle Lösung! Jetzt funktioniert es auf Safari super

[Don]

Hallo @ti0,

es scheint, dass sich der Vimeo-Uploadmechanismus geändert hat. Wenn man den Link im Forum-Editor einfügt, beginnt Vimeo mit der Konvertierung des Videos. Daher kann das Video nicht als Onebox eingebunden und im Forum abgespielt werden, da es noch nicht bereit ist. Vielen Dank für deine Hilfe!

[anon82467725]

@Don

Das andere Problem ist, dass wir keine MP4-Dateien über den Safari-Browser unter macOS hochladen können.

Bei mir ebenfalls, aber das Problem scheint jetzt Mozilla Firefox auf allen Plattformen zu betreffen.

Es gab noch ein paar andere Probleme in Mozilla Firefox, aber ich muss diese noch einmal überprüfen, um weitere Klarstellungen zu geben.

[Don]

Ich denke, das Problem liegt hier: Auf Vimeo gibt es nach dem Upload und vor der Konvertierung einen Abschnitt mit der Bezeichnung Waiting for convert.

In der Komponente befindet sich eine
const STATUS_POLLING_INTERVAL_MILLIS = 10000;

Wenn ich richtig liege, bedeutet dies, dass nach dem Upload-Prozess alle 10 Sekunden eine Anfrage an Vimeo gesendet wird, weshalb der Warteprozess zurückkommt, sobald das Video abgeschlossen ist. Da die Vimeo-API keine Webhooks usw. unterstützt, müssen wir periodisch Anfragen senden, um festzustellen, ob der Transkodierungsprozess noch läuft oder bereits abgeschlossen ist.

Ich habe dies für uns auf 60 Sekunden geändert, bis eine bessere Lösung verfügbar ist. Das sollte für die meisten Uploads ausreichen, um den Warteprozess zu umgehen. Ich habe es mit kleinen (~10 MB), mittleren (~500 MB) und großen Uploads (~2 GB) getestet.
Bei kleinen Uploads beträgt die Wartezeit nur wenige Sekunden (~4–5 Sek.), bei mittleren ~10–15 Sek. und bei großen ~40–45 Sek. Ich denke, das hängt von der Größe der hochgeladenen Datei ab.

Es scheint zu funktionieren, aber wenn der Warteprozess für die Konvertierung länger als 60 Sekunden dauert, wird der Link wie zuvor eingefügt. Es wäre gut, wenn wir diesen Warteprozess überspringen könnten.

[Zup]

Ich würde es vorziehen, dass Vimeo-Uploads direkt auf dem Konto des Uploaders und nicht auf meinem gemeinsamen Konto landen… ist das möglich?

[linzo (Collins)]

@ti0 Ich weiß nicht, ob das nur ich bin, aber ich denke, etwas ist kaputt. Der Upload bleibt bei „Authentifizieren

[ti0]

@linzo, dies ist ein CSP-Problem und hat nichts mit dem Theme-Komponenten zu tun. Lies bitte mehr über die Discourse-CSP hier: Mitigate XSS Attacks with Content Security Policy

@Zup

Ich würde es bevorzugen, wenn Vimeo-Uploads direkt im Konto des Uploaders und nicht in meinem gemeinsamen Konto landen… ist das möglich?

@Zup, dies ist eine zusätzliche Funktionsanfrage – natürlich möglich, aber es erfordert zusätzliche Arbeit, die bezahlt werden muss, wenn du eine Umsetzung möchtest. Lass es mich wissen, falls du das wünscht.

@Don

Das Video kann also nicht als Onebox eingebettet und im Forum abgespielt werden, weil es noch nicht fertig ist.

Entschuldige die verzögerte Antwort – ja, nach dem Upload findet ein Transkodierungsprozess statt, und das Upload-Dialogfeld zeigt dies an, bevor das Video eingebettet wird. Auf meiner Seite funktioniert dies wie erwartet. Es wartet, bis die Transkodierung abgeschlossen ist, schließt erst dann das Dialogfeld und bettet das Video ein. Hier ist eine Demo:

[debryc (Deborah Chang)]

Ich bin wirklich begeistert von dem Potenzial dieser Theme-Komponente. Funktioniert diese Theme-Komponente auch mobil? Also, kann ich von meinem Handy aus ein Video aus meiner Fotobibliothek hochladen?

Ich habe versucht, sie in der Vorschau des Theme-Erstellers anzusehen, und erhielt eine „Zugriff verweigert"-Meldung.

[Don]

Hallo Deborah,

wir nutzen es auf unserem Forum mit Vimeo-Uploads, und es funktioniert auf jedem Gerät hervorragend. Der Auswahlprozess ist derselbe wie bei Discourse, aber nachdem du das Video ausgewählt hast, musst du auf die Schaltfläche „Vimeo oder YouTube hochladen" klicken, um den Upload zu starten.

[debryc (Deborah Chang)]

Ist dein Forum öffentlich? Könnte ich es mir mal ansehen? Ich würde es gerne live sehen! Wie lautet die URL?

[davidkingham]

Das funktioniert super! Eine nette Funktion wäre die Möglichkeit, Videos in einen bestimmten Ordner auf Vimeo hochzuladen, damit ich die Uploads der Nutzer von meinen eigenen trennen kann. Danke dafür!

[ti0]

Schön, dass es dir gefällt Wenn du bereit bist, diesen Feature-Wunsch umzusetzen, kann ich es implementieren, oder du reichst einen PR ein. Lass es mich wissen.

[debryc (Deborah Chang)]

Können Videos automatisch Untertitel erhalten und diese standardmäßig angezeigt werden? Das ist für uns im Hinblick auf Barrierefreiheit sehr wichtig.