Caricamento video su YouTube e Vimeo utilizzando il componente Theme

[ti0]

Questo nuovo componente del tema abilita il caricamento di video dal composer di Discourse su YouTube e Vimeo. Per chi è già familiare con il plugin che ho sviluppato di recente, la stessa funzionalità è ora disponibile in questo componente del tema, che può essere aggiunto a qualsiasi tema. Questo rende l’installazione molto più semplice e funziona esattamente come il plugin.

Funzionalità

Tutti i membri del forum possono caricare video su Vimeo o YouTube (gli amministratori possono scegliere di abilitare uno o entrambi).

Gli amministratori possono controllare la privacy di visualizzazione e incorporamento dei video caricati su Vimeo tramite le impostazioni di amministrazione.

Gli utenti possono controllare la privacy di visualizzazione dei video caricati su YouTube direttamente dalla finestra di caricamento.

Puoi guardare una demo del plugin qui (tutto è identico nel componente, tranne la pagina delle impostazioni. La pagina delle impostazioni del componente si trova in Amministrazione > Personalizza > Componenti > Caricamento video):

Discourse Video Upload Plugin with YouTube and Vimeo Demo

Configurazione

Importante: Per i componenti del tema, devi assicurarti di attivare il componente per i temi utilizzati nella tua istanza (puoi cliccare su Aggiungi tutti i temi o scegliere i temi desiderati).

La configurazione per lo sviluppo necessaria per abilitare i caricamenti su YouTube e Vimeo è elencata di seguito. Se preferisci che qualcuno lo faccia per te, puoi richiedere assistenza contattandomi, @ti0.

Per i caricamenti su YouTube

I caricamenti su YouTube vanno all’account di chi carica, a differenza dei caricamenti su Vimeo che vanno a un account comune.

Visualizza i passaggi

• Crea un account e un progetto su https://console.developers.google.com

• Abilita l’API YouTube Data v3

• Configura la schermata di consenso OAuth per utenti esterni (a meno che tutti gli utenti del tuo forum Discourse non appartengano a un’unica organizzazione Google).

• Configura le tue credenziali:

  • Crea un ID client OAuth
  • Scegli il tipo di applicazione Web
  • Aggiungi l’URL della tua istanza Discourse nella sezione Origini JavaScript autorizzate

• Copia solo l’ID client generato

• Vai alla pagina delle impostazioni del componente in Amministrazione Discourse e incolla l’ID client nel campo youtube api client id.

• Abilita i caricamenti su YouTube attivando questa impostazione: youtube upload enabled

• Regola le opzioni predefinite di privacy di visualizzazione per YouTube se necessario.

• Dovresti ora essere in grado di caricare video direttamente dal composer dei topic di Discourse su YouTube.

Per i caricamenti su Vimeo

Una volta configurato il componente seguendo i passaggi riportati di seguito, tutti gli utenti della community potranno caricare video sul tuo account Vimeo.

Sei responsabile dei limiti e dell’utilizzo del tuo account Vimeo.

Visualizza i passaggi

• Crea un account e un’app su Vimeo Developers:
  https://developer.vimeo.com/apps/new

• Genera un token di accesso con autorizzazioni per il caricamento

• Vai alla pagina delle impostazioni del componente nella tua Amministrazione Discourse, aggiungi il token di accesso generato nell’impostazione vimeo api access token e salva

• Abilita i caricamenti su Vimeo attivando l’impostazione vimeo upload enabled.

• Regola le opzioni di privacy per visualizzazione e incorporamento

  • Consulta questa pagina di Vimeo per le opzioni di privacy: privacy.view e privacy.embed

• Dovresti ora essere in grado di caricare video direttamente dal composer dei topic di Discourse su Vimeo

Pubblicazione di un video

• Per pubblicare un video, crea un nuovo topic o rispondi a un topic esistente.

• Clicca sul nuovo pulsante Carica su Video nella barra degli strumenti del composer (l’icona del video). Questo pulsante è visibile solo se hai abilitato YouTube o Vimeo (o entrambi) nelle impostazioni del plugin.

• Scegli un file video e modifica i dettagli, come titolo e descrizione, se lo desideri.

• Clicca sul pulsante Carica su Vimeo o Carica su YouTube.

  • I pulsanti visualizzati dipendono da quali caricamenti hai abilitato (YouTube, Vimeo o entrambi).

  • Ti mostrerà l’avanzamento del caricamento e poi attenderà che il video completi il processo di transcodifica.

  • La finestra rimarrà aperta fino al completamento della transcodifica.

  • Una volta completata la transcodifica, il link al video verrà aggiunto al composer (a meno che non si sia verificato un errore durante la transcodifica).

• Salva il post e il tuo video potrà essere visualizzato da tutti gli altri utenti della community
  (a seconda delle opzioni di privacy selezionate).

Richieste di funzionalità

Puoi richiedere funzionalità aggiuntive o assistenza contattandomi @ti0.

Contributi

Se hai trovato utile questo componente del tema, considera di fare una donazione allo sviluppatore tramite questo link PayPal: PayPal.Me

Contributi grandi e piccoli sono ugualmente benvenuti

Se desideri migliorare il componente/il plugin, le PR sono benvenute.

	Anteprima	Anteprima del creatore di temi
	Repository	discourse-video-upload
	Guida all’installazione	Come installare un tema o un componente del tema
	Nuovo ai temi di Discourse?	Guida per principianti all’uso dei temi di Discourse

[Canapin (Coin-coin le Canapin)]

@ti0

Questo rende l’installazione molto più semplice e funziona esattamente allo stesso modo del plugin.

Il plugin verrà quindi discontinuato?

[ti0]

Non proprio ora, ma penso che sarà molto più semplice mantenere solo il componente del tema. Per il momento manterrò il plugin, ma consiglierò di migrare verso il componente del tema.

[Don]

Grazie @ti0 È di nuovo fantastico È molto più semplice utilizzare un componente del tema piuttosto che un plugin.

Una domanda. Puoi aggiungere questi testi da tradurre? Caricamento, trascodifica video e titolo, descrizione e altri dettagli del video? Grazie!

[ti0]

@Don ora tutti i label nel componente possono essere personalizzati

[Don]

Ciao

Mi piace molto il tuo componente, grazie ancora per averlo realizzato.

Ha funzionato benissimo, ma ora abbiamo qualche problema
A volte si verifica un errore durante la transcodifica dei video (solo file mp4) status.error.transcode. Il video viene caricato correttamente ma viene visualizzato solo su Vimeo e non inserisce il link nel compositore.

L’altro problema è che non possiamo caricare file mp4 dal browser Safari su MacOS.

È possibile risolvere questi problemi in qualche modo?

Grazie per la tua risposta!

[ti0]

Ciao @Don, grazie per aver individuato questo caso limite su MacOS Safari. Sembra trattarsi di un problema di Safari (un riferimento su SO); ho risolto il problema nel componente del tema, quindi una volta aggiornato e ricaricata la pagina, dovresti essere in grado di caricare file MP4 da Safari. L’ho appena testato sulla mia macchina e ora funziona.

Per quanto riguarda gli errori di transcodifica, questi si verificano lato Vimeo; non c’è nulla che possiamo fare dal nostro lato.

[Don]

Grazie per la correzione rapida! Ora funziona benissimo su Safari

[Don]

Ciao @ti0,

Sembra che il meccanismo di caricamento di Vimeo sia cambiato. Quando inserisci il link nel compositore del forum, su Vimeo inizia la conversione del video. Di conseguenza, il video non può essere inserito in una casella e riprodotto sul forum perché non è ancora pronto. Grazie per il tuo aiuto!

[anon82467725]

@Don

L’altro problema è che non possiamo caricare file mp4 dal browser Safari su MacOS.

Anche a me succede lo stesso, ma ora sembra che il problema riguardi Mozilla Firefox su tutte le piattaforme.

Si sono verificati alcuni altri problemi su Mozilla Firefox, ma dovrò tornare su quegli argomenti per fornire ulteriori chiarimenti.

[Don]

Quindi penso che il problema sia questo. Su Vimeo c’è una sezione In attesa di conversione dopo Caricamento ma prima di Conversione.

Nel componente c’è un
const STATUS_POLLING_INTERVAL_MILLIS = 10000;

Se ho capito bene, significa che dopo il processo di caricamento viene inviata una richiesta a Vimeo ogni 10 secondi, ed è per questo che il processo di attesa restituisce il video come completato. Poiché l’API di Vimeo non supporta i webhook, ecc., dobbiamo inviare richieste periodicamente per verificare se il processo di trascodifica è ancora in corso o se è terminato.

Ho modificato questo valore a 60 secondi per noi, fino a quando non arriverà una soluzione migliore; questo sarà sufficiente per la maggior parte dei caricamenti per saltare la richiesta del processo di attesa. Ho testato con piccoli ~10 MB, medi ~500 MB e grandi caricamenti ~2 GB.
Con i caricamenti piccoli il tempo di attesa è di pochi secondi ~4-5 secondi, per quelli medi è ~10-15 secondi, per quelli grandi è ~40-45 secondi. Penso che dipenda dalla dimensione del file caricato.
Sembra funzionare, ma se il processo di attesa per la conversione richiede più di 60 secondi, incollerà il link come prima. Sarebbe ottimo se potessimo saltare questo processo di attesa.

[Zup]

Preferirei che i caricamenti su Vimeo andassero all’account dell’uploader invece che al mio account comune… è possibile?

[linzo (Collins)]

@ti0 Non so se sia solo io, ma credo che qualcosa non funzioni. Il caricamento è bloccato su Authenticating e nella Console di Chrome viene visualizzato il seguente errore:

Alcune risorse sono bloccate perché la loro origine non è inclusa nell’elenco consentito della Content Security Policy (CSP) del tuo sito. La CSP del tuo sito si basa su un allowlist, quindi le risorse devono essere elencate nell’allowlist per poter essere accessibili.

La Content Security Policy di un sito può essere impostata tramite un header HTTP (consigliato) o tramite un tag meta HTML.

Per risolvere questo problema, segui una delle seguenti opzioni:

1. (Consigliato) Se stai utilizzando un allowlist per `'script-src'`, valuta la possibilità di passare da una CSP basata su allowlist a una CSP rigorosa, poiché le CSP rigorose sono più robuste contro gli attacchi XSS. Scopri come impostare una CSP rigorosa.

2. Oppure verifica attentamente che tutte le risorse bloccate siano attendibili; se lo sono, includi le loro origini nella CSP del tuo sito. ⚠️Non aggiungere mai una fonte non attendibile alla CSP del tuo sito. Se non ti fidi della fonte, valuta di ospitare le risorse sul tuo sito invece.

RISORSE INTERESSATE
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`

bloccato script-src-elem api.js:12

[ti0]

@linzo questo è un problema CSP, non ha nulla a che vedere con il componente del tema. Per favore leggi di più su Discourse CSP qui: Mitigate XSS Attacks with Content Security Policy

@Zup

Preferirei che i caricamenti Vimeo andassero all’account dell’uploader piuttosto che al mio account comune… è possibile?

@Zup, questa è una richiesta di funzionalità aggiuntiva: è possibile, naturalmente, ma richiede lavoro extra che dovrà essere pagato se desideri che venga implementata. Fammi sapere se sei interessato.

@Don

Quindi il video non può essere inserito in una casella e riprodotto nel forum perché non è pronto.

Scusa per il ritardo nella risposta: sì, c’è un processo di transcodifica dopo il caricamento, e la finestra di dialogo del caricamento lo mostra prima di incorporare il video. Sul mio lato funziona come previsto. Attende il completamento della transcodifica e solo allora chiude la finestra di dialogo e incorpora il video. Ecco una demo:

[debryc (Deborah Chang)]

Sono davvero entusiasta del potenziale di questo componente del tema. Funziona anche da mobile? Cioè, se sono sul telefono, posso caricare un video dalla mia libreria fotografica?

Ho provato a visualizzarlo nell’anteprima del Creatore di temi e ho ricevuto un avviso di Accesso negato.

[Don]

Ciao Deborah,

Lo usiamo sul nostro forum con i caricamenti di Vimeo e funziona davvero bene su tutti i dispositivi. Il processo di selezione è lo stesso di Discourse, ma dopo aver selezionato il video devi cliccare sul pulsante “carica Vimeo” o “carica YouTube” per avviare il caricamento.

[debryc (Deborah Chang)]

Il tuo forum è pubblico? Potrei darci un’occhiata? Mi piacerebbe vederlo in azione! Qual è l’URL?

[davidkingham]

Funziona benissimo! Una bella funzionalità sarebbe la possibilità di caricare i video in una cartella specifica su Vimeo, così da poter tenere separati i caricamenti degli utenti dai miei. Grazie per questo!

[ti0]

Sono contento che ti piaccia Se sei disposto a contribuire a questa richiesta di funzionalità, posso implementarla io oppure puoi inviare una PR, fammi sapere.

[debryc (Deborah Chang)]

I video possono essere sottotitolati automaticamente e i sottotitoli visualizzati in modo predefinito? È davvero importante per noi per l’accessibilità.