API

Come incorporare un widget per videoregistratore sui siti Wix

Pubblicato il 2 marzo 2018
Scritto da Tobi Raub
Clipchamp è un editor di video online gratuitoProva gratis
Condividi questo post

In un post precedente, ti abbiamo mostrato come convertire video e ridurre le dimensioni del file in modo che tu possa utilizzarli più facilmente sul tuo blog Wix o sul tuo sito web.

Mentre quest’ultimo articolo era relativo ai tuoi file video e alla progettazione del tuo sito web, nel post attuale ti mostriamo come installare un videoregistratore per ricevere video dai visitatori del tuo sito.

Gli screenshot qui sotto sono per Wix, tuttavia il metodo descritto qui funziona anche per far funzionare un registratore webcam su altre piattaforme di sviluppo di siti Web, purché sia ​​possibile aggiungere codice personalizzato nelle impostazioni admin della piattaforma.

Creare e aggiungere un videoregistratore Wix

Con questo metodo, gli utenti saranno in grado di registrare un video con la loro webcam direttamente sul tuo sito Wix o lasciare che carichino file video che hanno già sul loro computer.

wix-video-recorder

In entrambi i casi, i video possono essere inviati al tuo account YouTube, Dropbox, Google Drive, Amazon S3 o Microsoft Azure. Anche se per poter visualizzare facilmente le clip sul tuo sito dopo che le persone li hanno caricati, **farglieli inviare su YouTube**

ha più senso in quanto puoi incorporarli da lì attraverso l’editor Wix.

Per installare questo videoregistratore Wix, facciamo uso della nostra API webcam HTML5 video e JavaScript. È un widget che puoi incorporare in un sito Web per raccogliere video da utenti e visitatori del sito. Sebbene sia disponibile per siti web di qualsiasi tipo, ci sono alcuni passaggi specifici necessari per farlo funzionare su un sito Wix.

*************As recommended by Wix, the best way to embed a recording and video uploading widget like the Clipchamp API is via backend code, see https://support.wix.com/en/article/accessing-3rd-party-services#backend-service-call.

A developer or software engineer in your team or at your web agency will be able to follow these instructions in combination with the steps described at https://help.clipchamp.com/collect/getting-started/initial-setup-of-the-clipchamp-api.

*************A 2nd method using Custom Code blocks in the frontend of your website is described below. Note that it might not work in some circumstances, if that is the case then the method recommended by Wix through the backend code of your site is the best alternative.**************

1) Accedi alla back-end di amministrazione del tuo sito Wix

Dovrai creare una nuova pagina modello in un passaggio successivo e copiare parte del codice nelle impostazioni HTML di questa pagina.

2) In una seconda scheda del browser, registrati per una prova gratuita dell’API video Clipchamp

La registrazione per un account di prova per la nostra API è richiesta per ottenere la tua chiave API unica, che ti servirà in un passaggio successivo e impostare un target di upload per i video degli utenti. Non hai bisogno di una carta di credito per registrarti e puoi annullare la prova in qualsiasi momento.

register-clipchamp-trial

register-clipchamp-trial

3) Imposta YouTube come target di upload in cui inviare i video degli utenti

Dopo aver aperto un account di prova, nelle impostazioni API su https://util.clipchamp.com/it/api-setup/integrations, clicca su YouTube e collega l’API di Clipchamp al tuo account YouTube in modo che i video che i tuoi utenti  caricano possono essere caricati sul tuo canale o in una playlist specifica.

set-youtube-uploads

4) Vai su https://util.clipchamp.com/it/api-setup/install

In questa pagina troverai due snippet di codice necessari per incorporare il pulsante di registrazione video sul tuo sito. Puoi ignorare le istruzioni menzionate in questa pagina poiché si applicano ai siti Web non Wix. Nel tuo caso, ciò che devi fare è copiare e incollare entrambi i frammenti di codice nell’editor HTML di una nuova pagina creata su Wix.

clipchamp-api-code

5) Crea una nuova pagina su Wix e apri le “Impostazioni HTML”

Nell’ editor HTML, incolla lo snippet di codice dalla prima sezione della pagina Clipchamp dal punto 4 come segue:

wix-html-editor

6) Quindi, copia il codice dalla seconda sezione direttamente sotto il primo snippet nell’editor HTML

wix-html-editor

7) Poi, salva e visualizza in anteprima la pagina in cui hai incorporato il codice HTML

Se il codice è stato aggiunto correttamente, la pagina di anteprima dovrebbe mostrare un nuovo pulsante di registrazione video incorporato. Sìì!

test-video-button

8) Come ultimo passaggio, autorizza i domini dei pulsanti video

Affinché il registratore funzioni, è necessario inserire nella lista bianca 2 domini nelle impostazioni dell’API Clipchamp come segue:I 1° dominio: Copia l’URL che Wix sta usando per mostrare il bottone Clipchamp incorporato sulla tua pagina Wix e aggiungilo alla lista di domini autorizzati nelle tue impostazioni API di Clipchamp su https://util.clipchamp.com/it/api-setup/domains. Questo non è l’URL (o “dominio”) mostrato nella barra degli indirizzi del tuo browser (presumiamo che tu stia utilizzando Chrome) ma è l’URL dell’ iframe del pulsante del video sulla tua pagina.

È possibile ottenere questo dominio spostando il puntatore del mouse alcuni pixel sotto il pulsante Clipchamp nell’anteprima della pagina, quindi facendo clic con il pulsante destro e selezionando “Visualizza origine frame”. In Chrome, si apre una nuova scheda del browser. Vai alla barra degli indirizzi della scheda e copia il nome del dominio da lì. Nel nostro esempio, il dominio ha questo aspetto

wix-iframe-url

Il 2° dominio: Questo nome di dominio segue la convenzione di denominazione ilnomedeltuosito-sitowix-com.fileusr.com, so e.g. moestavern-wixsite-com.fileusr.com. Regolalo con il nome del tuo sito Web e aggiungilo all’elenco dei domini Clipchamp, quindi puoi pubblicare la tua pagina prova di Wix con il pulsante di registrazione incorporato su di esso per verificare se viene visualizzata correttamente.

Puoi anche trovare questo secondo nome di dominio guardando il codice sorgente della tua pagina Wix

whitelist Wix domain to display the video recorder button

Dopo aver salvato questi 2 nomi di dominio nelle impostazioni API di Clipchamp, il pulsante del registratore video e uploader sulla tua pagina Wix sarà pronto per essere utilizzato in modo che i tuoi visitatori possano iniziare a inviare registrazioni e altri video al tuo canale YouTube.

wix-video-recorder

9) Mostra video inviati sul tuo sito

Se desideri utilizzare i video che le persone inviano e che ora si trovano nel tuo canale YouTube per visualizzarli sul tuo sito web, consulta le istruzioni seguenti nell’assistenza Wix su come incorporare video YouTube.

Concludendo

Questi sono tutti i passaggi necessari per raccogliere video dai visitatori del tuo sito se stai usando Wix. Abbiamo anche scritto un breve articolo di aiuto in merito all’argomento per chiunque si sia già registrato per un account API video Clipchamp.

Se non stai utilizzando uno sviluppatore di siti web, consulta questo tutorial separato per istruzioni di installazione per incorporare l’API video HTML5 su qualsiasi sito.

Lo abbiamo costruito insieme ai nostri clienti per renderlo adatto a una vasta gamma di scenari e qualsiasi tipo di progetto web. Ciò include ad esempio la possibilità di raccogliere testimonianze video dai tuoi clienti se gestisci un negozio online o per ottenere commenti video dai lettori del tuo blog.

Una nota finale: il nostro widget del videoregistratore è dotato di un’ampia gamma di opzioni, ad esempio è possibile modificare il proprio marchio personalizzato, regolare i colori e altri elementi di stile, nonché una serie di impostazioni relative ai video di input e output.

Poiché si tratta di opzioni per esperti, non le abbiamo trattate in questo post, tuttavia sei il benvenuto ad approfondire la documentazione API e decidere quale dei suoi parametri desideri aggiungere al tuo videoregistratore Wix. Puoi aggiungere qualsiasi opzione nello snippet di codice che hai inserito nell’editor HTML nel passaggio 6.

Altro dal blog Clipchamp

Come registrare un video tramite webcam su Chromebook

15 maggio 2021
Questo post del blog è stato aggiornato a maggio 2021. Negli ultimi anni, la quota…

Come avviare un Vlog personale

3 novembre 2020
Tutti sognano di diventare «Famosi su YouTube». YouTube è diventato uno dei modi…

Inizia a creare video gratuiti con Clipchamp

It looks like your preferred language is English