Pubblicato il 03/01/18 - aggiornato il  | 7 commenti :

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.

caricare file google drive

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:

player video google drive

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.

qualità sottotitoli video

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.

player video html5

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.


7 commenti :

  1. Ciao, l'unico problema è che bisogna schiacciare Play due volte, una volta per fare partire il video sul sito, e una volta per farlo partire su Google Drive.
    Sto cercando già da un po' su internet, ma nessuno fornisce un codice che mandi il video in auto play. Puoi forse aiutare tu? Ti ringrazio!

    RispondiElimina
    Risposte
    1. Qui ci sono le istruzioni generali anche con un video tutorial incorporato. A fondo pagina c'è anche il tag da usare per l'autoplay
      https://www.ideepercomputeredinternet.com/2019/04/html5-audio-video-tag-player-dropbox.html
      Forse ti possono aiutare anche questi altri due post
      https://www.ideepercomputeredinternet.com/2019/08/video-come-gif-player-html5.html
      https://www.ideepercomputeredinternet.com/2016/06/audio-sottofondo-autoplay-html5.html

      Elimina
  2. Buongiorno, non mi funziona neanche con la stringa di Drive. Che amarezza :(

    RispondiElimina
    Risposte
    1. @# Con il link di download di Google Drive dovrebbe funzionare. Prova con questo codice di test che a me funziona

      <video controls="" preload="auto" src="https://drive.google.com/uc?export=download&id=1y-v9Fc4EiESkQ3s-KCBf5K09JdKaJjaW" width="700" height="394"> </video>

      Forse hai sbagliato qualcosa nel creare il link di download. Purtroppo non funziona più neppure con il link di OneDrive
      https://www.ideepercomputeredinternet.com/2019/09/onedrive-link-download-player-html5.html
      A questi grandi player internet dà fastidio che si studi modi per evitare di usare i loro servizi 😬

      Elimina
  3. Confermo: il tuo si vede nel mio sito.

    Ma allora perché il mio no?
    Il link del mio video, copiato direttamente da drive, è:
    https://drive.google.com/file/d/1bw56AyzdN7CSg4lpwe8cFhFkX_PEM9ti/view?usp=sharing
    Il link lo sostituisco esattamente dopo


    Mi puoi confermare solo la correttezza?

    Grazie.

    RispondiElimina
    Risposte
    1. Ho provato con ID del tuo file e purtroppo non funziona. Forse il video è troppo lungo (ipotesi). Se infatti incollo questo link nel browser
      https://drive.google.com/uc?export=download&id=1bw56AyzdN7CSg4lpwe8cFhFkX_PEM9ti
      e vado su Invio, Google mi dice che non può effettuare la scansione antivirus del file perché è troppo grande (190MB)
      @#

      Elimina
  4. Se può essere utile anche ad altri ho usato una piattaforma che si chiama BlackBlaze: funziona esattamente come Drive o Drop e ti fa un lavoretto bello bello e super veloce. Sicuramente ho dovuto alleggerire il file così va tutto più rapido.
    Il tuo codice, manco a dirlo, è super corretto :D
    Grazie ancora per la disponibilità e l'aiuto!!!
    Fai buone feste,
    Vanessa.

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy