Come incorporare un video in una pagina web con Google Drive

Come implementare o embeddare un video in una pagina web caricandolo su Google Drive e mostrandolo con un player in stile Youtube o con quello dei tag HTML5.

Questo post potrebbe sembrare un inutile esercizio di stile perché per implementare un video in una pagina web basta pubblicarlo in un canale Youtube per poi copiarne il codice relativo e incollarlo in un sito in Modalità HTML.

Ci possono essere diverse ragioni per non usare Youtube per una condivisione di video in un nostro blog. La prima che mi viene in mente è quella del contenuto del video che potrebbe essere contrario alle norme di Youtube. Un'altra è quella della risoluzione del video. Su Youtube si può scegliere tra un rapporto larghezza e altezza del player di 4:3 o di 16:9 e, se abbiamo creato un video con un cellulare in posizione verticale, la maggior parte del player sarà costituta da spazio nero. 

In questo articolo vedremo come caricare un video su Google Drive e come creare un codice per poterlo implementare in una pagina web. Lo spazio disponibile su Google Drive è di 15GB ma non è che si possono caricare tutti i video che ci pare. Non si possono per esempio caricare video protetti da copyright o di incitamento all'odio o di natura violenta o di informazioni personali riservate.

Prima di caricare un video su Google Drive consultate quindi i Termini di Servizio e le Norme del Programma. Per incorporare un video in una pagina web utilizzeremo due metodi che abbiamo già visto per l'implementazione dei file audio. Seguendo la stessa falsariga mostrerò come procedere con due diverse metodologie. Con la prima useremo i tag HTML5 mentre con la seconda l'Anteprima di Google Drive. 

COME CARICARE IL VIDEO SU GOOGLE DRIVE

Il video che vogliamo caricare su Google Drive è opportuno che venga convertito in formato .MP4. Non escludo che possano essere supportati altri formati ma la scelta di MP4 è quella di elezione se si vuole inserire il video in una pagina web. Per convertire un video in un altro formato si possono usare i programmi gratuiti iWisoft Free Video Converter e Format Factory. Quando il video è pronto si accede a Drive con un account Google.

Si apre la cartella in cui aggiungere il file quindi si va su Nuovo -> Caricamento di file in alto a sinistra, si sceglie il file e si aspetta di ricevere la notifica di avvenuto caricamento in basso a destra.

Il file verrà visualizzato nella cartella scelta oppure in quella Recenti con gli ultimi caricamenti. Si clicca con il destro del mouse sopra al file e si sceglie Condividi. Verrà aperta una nuova finestra in cui andare su Ottieni link condivisibile.  Verrà generato un URL. Si va su Copia link per copiarlo negli Appunti.

L'indirizzo del video da postare in una pagina web avrà questa struttura di base

https://drive.google.com/file/d/FILE-ID/view?usp=sharing

dove al posto di FILE-ID c'è una stringa alfanumerica che individua il file in modo univoco. Si modifica tale URL inserendo preview al posto di view?usp=sharing in questo modo

https://drive.google.com/file/d/FILE-ID/preview

dove ovviamente va inserito il FILE-ID. Non resta che creare un player per il video.

CREARE UN PLAYER PER I VIDEO CARICATI SU GOOGLE DRIVE

Google Drive permette di riprodurre in anteprima i video caricati sul suo spazio. I video saranno mostrati in un player che ricorda moltissimo quello di Youtube. Tramite l'URL di anteprima si crea un codice come questo

<div align="center"> <iframe frameborder="0" width="640" height="480" src="https://drive.google.com/file/d/FILE-ID/preview"> </iframe> </div>

Al posto di FILE-ID si inserisce la stringa alfanumerica che individua il file. Possono essere personalizzate le dimensioni di altezza e di larghezza e si può decidere di inserire solo il parametro della larghezza in modo che l'altezza venga calcolata mantenendo le proporzioni. Il risultato sarà il seguente:

Al centro del video verrà mostrata l'icona del Play su cui cliccare per riprodurlo. In basso verranno mostrati gli strumenti del player che sono sostanzialmente identici a quelli di Youtube con l'icona per lo schermo intero e l'icona per le Impostazioni in cui settare la qualità del video, la velocità e i sottotitoli.

La controindicazione nell'utilizzare Google Drive come hosting al posto di Youtube è che il video ha bisogno di qualche tempo per caricarsi e quindi questo metodo è consigliato per video non troppo lunghi.

COME CREARE UN PLAYER VIDEO CON HTML5

Usando il link di condivisione e nello specifico il FILE-ID dello stesso, si può anche creare un player con i tag HTML5 che sarà diverso da quello di Google Drive in stile Youtube. 

Utilizzando lo stesso URL del file condiviso cioè

https://drive.google.com/file/d/FILE-ID/view?usp=sharing

si può creare un link di download con questa struttura

https://drive.google.com/uc?export=download&id=FILE-ID

in cui occorre solo aggiungere il FILE-ID.  Per creare il player video HTML5 si usa questo codice

<div align="center">
<video controls="" preload="auto" src="https://drive.google.com/uc?export=download&id=FILE-ID" width="640" height="480"> </video></div>

dove può essere tralasciata la dimensione dell'altezza e aggiungere il FILE-ID del video.

Il player HTML5 è più minimalista di quello di Google Drive e presenta oltre alle icone del Play e della Pausa anche il cursore per regolare il volume dell'audio e l'icona per il download del file.

Chi non volesse permettere ai lettori di scaricare il video può nascondere l'icona del download visibile sulla destra del player aggiungendo nel codice controlsList="nodownload" dopo video controls="".

Concludo ricordando che nel player di Google Drive è visibile un pulsante in alto a destra per aprire il video su Google Drive invece che nella pagina web mentre un tale bottone non esiste nel player HTML5.