Come creare un bottone o un banner con un video anche con audio che se cliccato porta a un pagina web che si riproduce in loop.
In un articolo scritto all'inizio di Settembre ho mostrato quasi tutte le opzioni per creare un bottone da inserire in una pagina web con un semplice codice HTML, con il linguaggio CSS per personalizzarne l'aspetto, con una immagine e addirittura con un video realizzato in Flash segnatamente in formato SWF.
Tale tecnologia sviluppata dalla Adobe è però da tempo molto criticata per la mancanza di sicurezza e per il grande consumo di risorse che richiede. Verrà abbandonata definitivamente a partire dal 2021 (cito a memoria) e sostituita integralmente con video inseriti nelle pagine web con il linguaggio HTML5.
Con questa tecnologia supportata ormai da tutti i principali browser basterà usare il tag <video> con una opportuna sorgente, così come avviene per le immagini, per mostrare un filmato senza bisogno di usare un player. Questo può essere fatto anche per un file audio senza mostrare l'icona di download e le altre icone di controllo.
Anche nell'ambito della pubblicità visibile nel web si è assistito al passaggio dal Flash a altre tecnologie e da tempo vengono visualizzati i banner anche senza aver attivato il flash nel browser. In questo post vedremo tutti i passaggi per creare un bottone cliccabile che abbia l'aspetto di un filmato. La differenza tra bottone e banner in questo caso sta esclusivamente nelle dimensioni della clip video.
Come esempio realizzerò un banner senza audio ma si possono creare anche bottoni o banner con audio che si riproducono in loop insieme al filmato. Prima di iniziare occorre estrarre la clip con cui creare il banner.
ESTRARRE UNA CLIP DA UN VIDEO
Per estrarre un breve filmato da un video si può usare il programma iWisoft Free Video Converter di cui trovate il link di download nel post appena linkato. Si apre il programma si va su Add e si carica il video.
Si clicca su Edit per poi selezionare la scheda Trim e con i cursori si fissano i punti iniziali e finali della clip
Si va su OK per chiudere la finestra per poi cliccare su Start e completare l'estrazione della clip video. In Profile è opportuno scegliere un formato di uscita in MP4. Al posto di iWisoft Free Video Converter si può usare anche Format Factory per l'estrazione del filmato. Il video può essere anche stato creato da noi con la fotocamera del cellulare e poi trasferito nel computer con un trucco di WhatsApp, con Dropbox oppure anche con una applicazione tipo AirDroid per Android e iOS.
COME CARICARE IL FILMATO NEL WEB
Se avete uno spazio vostro ovvero un dominio acquistato da un provider potete caricarvi la clip video e ottenerne il link diretto che sarà poi quello da incollare nel codice. Se non possedete un tale spazio personale potete usare la versione basic di Dropbox per caricarvi il file e ottenerne il link di download.
In sostanza si clicca sul link Condividi accanto al file in oggetto nella Bacheca di Dropbox. Si va poi su Crea link e Copia link. Il trucco è quello di sostituire la parte finale del link ?dl=0 con ?dl=1.
Tanto per fare un esempio il Link di Download della clip creata per il test è il seguente
https://www.dropbox.com/s/f6qoqb95c2ovyae/cellulare.mp4?dl=1
dove ho sostituito con dl=0 con dl=1 la parte finale dell'URL. Il formato del file sarà visibile subito prima del punto interrogativo e per essere compatibile con l'HTML5 deve essere MP4 con il codec H.264.
COME CREARE IL BOTTONE O IL BANNER CON LINK
Adesso dobbiamo creare un banner o un bottone che se cliccato invii in una pagina web a nostra scelta. È importante trovare le dimensioni del bottone o del banner.
Lo si può fare facilmente prendendo uno screenshot del video ovvero catturandone un fotogramma con VLC o VirtualDub. Si punta l'immagine con il mouse in Esplora File per visualizzare il tooltip con le sue dimensioni.
Il codice da usare per il banner sarà simile a questo
<div align='center'>
<a href="http://www.ideepercomputeredinternet.com" target="_blank"><video autoplay="autoplay" height="271" loop="loop" width="650"> <source src="https://www.dropbox.com/s/2akr54zga0o8ysp/video.mp4?dl=1" type="video/mp4" /></video></a>
</div>
<a href="http://www.ideepercomputeredinternet.com" target="_blank"><video autoplay="autoplay" height="271" loop="loop" width="650"> <source src="https://www.dropbox.com/s/2akr54zga0o8ysp/video.mp4?dl=1" type="video/mp4" /></video></a>
</div>
che produce il risultato seguente
L'URL colorato di viola è la pagina di arrivo di clicca sul banner o bottone creato con il video. Il tag target="_blank" è opzionale e serve per aprire la landing page in un'altra scheda. Si incolla il link di download di Dropbox, si aggiunge l'autoplay e le dimensioni del filmato oltre al loop del video. Per ottenere un buon risultato occorre creare un video di pochi secondi altrimenti la pagina potrebbe impiegare troppo tempo a caricare. Un tale bottone o banner può essere incollato in un post ma anche in un widget HTML/Javascript di Blogger o in un widget Testo di Wordpress per mostrare il banner in una sidebar o nel footer.
Concludo il post ricordando che si possono mostrare questi banner o bottoni anche in modo Responsive per adattarli automaticamente alla risoluzione del dispositivo con cui viene aperta la pagina.
Concludo il post ricordando che si possono mostrare questi banner o bottoni anche in modo Responsive per adattarli automaticamente alla risoluzione del dispositivo con cui viene aperta la pagina.
Nessun commento :
Posta un commento
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