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 con javascript:

Youtube mette a disposizione anche un codice javascript per implementare un player video.
Il codice da usare e` questo:

<div class="youtube" id="XXXXXXXX" style="width: 320px; height: 180px;"></div>
<script src="https://labnol.googlecode.com/files/youtube.js"></script>

Le parti da personalizzare sono quelle in rosso.
Al posto di XXXXXXXX dovete mettere l'ID del player e impostare larghezza e altezza (width, height). Questo player e` molto leggero e non allunga i tempi di caricamento della pagina.

Player Youtube con 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="http://www.youtube.com/embed/XXXXXXXX"
 frameborder="0" allowfullscreen>
</iframe>

Come vedete, potete personalizzare le dimensioni del video. Se volete un player invisibile, impostate le dimensioni su 0.

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?rel=0&amp;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.

Come inserire i 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?