Player per video, o sottofondo musicale

di Maria Silvana Radice

Player for video, or only music





Player per video, o musica


Player per Youtube:


Come alcuni noteranno, ho cancellato la parte della guida relativa al caricamento dei player con il vecchio codice "object" in flash. Il motivo e` che flash e` considerato ormai obsoleto e viene bloccato dai browser per motivi di sicurezza
.

Player Youtube in html5:

Ormai sappiamo che flash e` destinato a lasciare il posto a html5 e, per questo motivo, tutti quanti si stanno, piano, piano, adeguando alla nuova realta`. I browser piu` popolari l'hanno gia` adottato. 
Anche Youtube ha deciso di trasmettere i suoi video in html5. Il codice lo fornisce lui stesso, cliccando su "Condividi", sotto al video e poi su  "Codice da incorporare".

Il codice e` molto semplice ed e` questo:

<iframe width="640" height="385"
 src="https://www.youtube.com/embed/XXXXXXXX"
 frameborder="0" allowfullscreen>
</iframe>

Come vedete, potete personalizzare le dimensioni del video.

Le XXXXXXXX, corrispondono all''ID del video, o della playlist.

Il parametro relativo ad autoplay, puo` essere inserito dopo l'URL, in questo modo:

<iframe width="420" height="315"
 src="https://www.youtube.com/embed/XXXXXXXX?autoplay=1"
frameborder="0" allowfullscreen>
</iframe>


Se volete un player invisibile, impostate le dimensioni su 0.

<iframe width="0"
 src="https://www.youtube.com/embed/XXXXXXXX?autoplay=1"
 frameborder="0" allowfullscreen>
</iframe>


Altri parametri possono essere aggiunti di seguito, separandoli con il punto e virgola. (vedi l'elenco dei parametri supportati: https://developers.google.com/youtube/player_parameters?csw=1)

Se il browser di un utente non supporta html5, c'e` il reindirizzamento, in automatico, alla visualizzazione con flash.

Centrare il video:

Per centrare il video nella pagina, basta racchiuderlo in questi tag:

<div style="text-align:center">
<iframe width="420" height="315"
 src="https://www.youtube.com/embed/XXXXXXXX?autoplay=1"
frameborder="0" allowfullscreen>
</iframe>
</div>

Player responsive:

Per rendere il player responsive potete utilizzare questo tool: iFrame-responsive tool



AGGIORNAMENTO (al 5/04/2017): fermo restando che i codici forniti sopra sono attualmente funzionanti, Youtube offre ora un nuovo tipo di codice per rendere il video responsive. Il video, però, non rispetta le dimensioni riportate, ma è sempre a tutta pagina (anche su desktop) e non è centrato. Per ovviare al problema, potete modificarlo aggiungendo queste impostazioni:

<div style="position:relative;height:0;padding-bottom:56.25%;width:100%;max-width:600px; margin:0 auto;"><iframe src="https://www.youtube.com/embed/XXXXXXXX?ecver=2" frameborder="0" style="position:absolute;width:100%;height:100%;left:0;" allowfullscreen></iframe></div>

Al posto di 600px metterete la larghezza del video che desiderate avere nella visualizzazione su desktop.



Come inserire il player in Google sites:

Il codice in javascript va inserito seguendo la guida Come inserire codici e scripts in Google sites
Il player in html5 puo` essere inserito direttamente nel codice html. Alcuni parametri (autoplay ecc.) potrebbero non funzionare sui dispositivi mobili.



Semplice player in html5 per caricare un brano personale:

Codice:

<audio controls>
<source src="file.mp3"></source>
<source src="file.ogg"></source>
Your browser does not support the audio element.
</audio>

Al posto di "file.mp3", e/o "file.ogg" mettete l'indirizzo del brano che volete riprodurre. Il formato ogg e` meglio supportato dai dispositivi mobili. La cosa giusta sarebbe inserire il brano in entrambi i formati.

Potete aggiungere altre funzioni, come autoplay e loop, semplicemente facendole seguire a controls in questo modo:
...controls loop autoplay...
In Google sites, questo codice va caricato seguendo la guida: Come inserire codici e scripts in Google sites





Aiuta il sito! Condividi questa pagina su:
 Facebook   twitter  Google   Linked  in    

Ti e` stato utile questo argomento?