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

This makes for a much easier installation and works in exactly the same way as the plugin.

Will the plugin be discontinued then?

[ti0]

Not right now, but I think it will be much easier just to maintain the theme component. I will keep the plugin around for now, but recommend migrating to the theme component.

[Don]

Thank you @ti0 This is awesome again Much easier to use a theme component then a plugin.

One question. Can you add these text to translate? Uploading , Transcoding Video and the video details title, description etc? Thank you!

[ti0]

@Don all labels in the component can be customized now

[Don]

Hello

I really like your component thank you again to make it.

It worked super good but now we have some problem
Sometimes we have error while transcoding video (only mp4 files) status.error.transcode. The video is upload correctly but only shown on Vimeo and not place the link in composer.

The other problem is we cannot upload mp4 files from MacOS Safari browser.

Is that possible to solve these problems somehow?

Thank you for your answer!

[ti0]

Hello @Don, thanks for catching this edge case on MacOS Safari. It looks like an issue in Safari (a reference on SO), I have fixed this issue in the theme component, so once you update it, then refresh the page, you should be able to upload mp4 from Safari. I just tested on my own machine and it works now.

Regarding transcode errors, that happens on the Vimeo end, no way to do anything on our side.

[Don]

Thank you for the quick fix! Now it works great on Safari

[Don]

Hello @ti0 ,

It seems to the Vimeo upload mechanism changed. When place the link on forum composer. Then on Vimeo they start converting the video. So the video cannot oneboxed and play on the forum because not ready. Thank you for your help!

[anon82467725]

@Don

The other problem is we cannot upload mp4 files from MacOS Safari browser.

Same here, but the issue now seems to affect Mozilla Firefox on all platforms.

There were a few other issues that occurred in Mozilla Firefox, but I will have to check back on those issues to provide further clarification.

[Don]

So I think the problem is this. On Vimeo there is Waiting for convert section after Upload but before Convert.

On the Component there is a
const STATUS_POLLING_INTERVAL_MILLIS = 10000;

If I am correct it means after the Upload process it send a request to Vimeo every 10 sec which is while the Waiting process comes back as the video complete. Because Vimeo Api not support Webhooks etc… So we need to send request periodically to find out the Transcoding process still processing or it is done.

I changed this to 60sec for us until comes a better solution this will enough most of the uploads to skip the Waiting process request. I tested with small ~10mb , medium ~500mb and large uploads ~ 2gb.
With small uploads the waiting time is few sec ~4-5sec, medium is ~10-15sec, large is ~40-45sec. I think it is depending how big is the uploaded file.
It seems works but if Waiting to convert process take more time than 60sec it will paste the link same as before. If we can skip this Waiting process it will be good.

[Zup]

i’d prefer Vimeo uploads go to uploader’s account rather than my common account… possible?

[linzo (Collins)]

@ti0 I don’t know if it’s just me, but I think something is broken. The upload is stuck at Authenticating and the following error is shown in Chrome Console

Some resources are blocked because their origin is not listed in your site’s Content Security Policy (CSP). Your site’s CSP is allowlist-based, so resources must be listed in the allowlist in order to be accessed.

A site’s Content Security Policy is set either as via an HTTP header (recommended), or via a meta HTML tag.

To fix this issue do one of the following:

1. (Recommended) If you're using an allowlist for `'script-src'` , consider switching from an allowlist CSP to a strict CSP, because strict CSPs are more robust against XSS . See how to set a strict CSP .

2. Or carefully check that all of the blocked resources are trustworthy; if they are, include their sources in the CSP of your site. ⚠️Never add a source you don't trust to your site's CSP. If you don't trust the source, consider hosting resources on your own site instead.

AFFECTED RESOURCES
https://apis.google.com/_/scs/apps-static/_/js/k=oz.gapi.en_US.bnEFfFZ9cyI.O/m=auth2,client/rt=j/sv=1/d=1/ed=1/am=AQ/rs=AGLTcCNaq8ri2P66tzK7chsKcRiE1CsLyQ/cb=gapi.loaded_0?le=ili,ipu,ili,ipu`

blocked script-src-elem api.js:12

[ti0]

@linzo this is a CSP issue, it has nothing to do with the theme component. Please read about Discourse CSP here: Mitigate XSS Attacks with Content Security Policy

@Zup

i’d prefer Vimeo uploads go to uploader’s account rather than my common account… possible?

@Zup, this is an additional feature request - possible of course but it is additional work which will have to be paid if you want it implemented. Let me know if you want that.

@Don

So the video cannot oneboxed and play on the forum because not ready.

Sorry for the delayed response - yes there is a transcoding process after the upload, and the upload dialog will show that before it embeds the video. This is working as expected on my side. It waits till the transcoding completes, only then it closes the dialog and embeds the video. Here is a demo:

[debryc (Deborah Chang)]

I’m really excited for the potential of this theme component. Does this theme component also work from mobile? As in, if I’m on my phone can I upload a video from my photo library?

I tried viewing it in the Theme creator preview and received an Access Denied notice.

[Don]

Hi Deborah,

We use it on our forum with Vimeo uploads and works really well on every device. The choosing process is same like Discourse but after you select the video you have to click the upload vimeo or youtube button to start the uploading.

[debryc (Deborah Chang)]

Is your forum public? Could I check it out? Would love to see it in action! What’s the url?

[davidkingham]

This is working great! A nice feature would be the ability to have the videos upload to a particular folder on vimeo so I could keep the user’s uploads separate from my own. Thanks for this!

[ti0]

Glad you like it If you are willing to contribute for this feature request I can implement it or you can submit a PR, let me know.

[debryc (Deborah Chang)]

Can videos be auto-captioned and the captions displayed by default? That’s really important for us for accessibility.