Player per video o musica

Sommario:

Per verificare i vostri codici, prima di inserirli, potete usare l'HTML editor.

Player Youtube in html5:

Ormai sappiamo che flash è destinato a lasciare il posto a html5 e, per questo motivo, tutti quanti si stanno, piano, piano, adeguando alla nuova realtà. I browser più popolari l'hanno già 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 è molto semplice ed è questo:
<iframe width="640" height="385" style="display: block; margin:0 auto; border: 0;"
src="https://www.youtube.com/embed/XXXXXXXX" allowfullscreen></iframe>

Come vedete, potete personalizzare le dimensioni del video.
Il comando margin:0 auto; serve a centrare il player nella pagina, se lo volete a sx, potete toglierlo.
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" style="display: block; margin:0 auto; border: 0;"
src="https://www.youtube.com/embed/XXXXXXXX?autoplay=1"
allowfullscreen></iframe>

Se volete un player invisibile, impostate solo l'altezza su 1. Purtroppo, non è più possibile impostare su 0. Si vedrà, quindi, una sottile linea orizzontale.
<iframe height="1" style="display: block; margin:0 auto; border: 0;" 
src="https://www.youtube.com/embed/XXXXXXXX?autoplay=1"
allowfullscreen></iframe>

Altri parametri possono essere aggiunti di seguito, separandoli con il punto e virgola. (vedi l'elenco dei parametri supportati: Parametri del player)

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

Player responsive:

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

Semplice player in html5 per caricare un brano personale:

Esempio:


Nota: il player ha un aspetto diverso a seconda del browser in uso. Su Safari mobile viene visualizzato unicamente il comando start/stop.
Codice:
<audio style="width:100%; max-width:300px" controls>
<source src="file.ogg" type="audio/ogg">
<source src="file.mp3" type="audio/mpeg">
Your browser does not support HTML5 audio.
</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..."
Impostate la larghezza massima del player.
Ricordatevi che, per le leggi sul copyright, è proibito a chiunque il riprodurre brani di cui non si è l'autore, o più recenti di 70 anni.

Semplice player in html5 per caricare un video:

Esempio:


Vale quanto detto per il player audio.

Codice:
<video style="width:100%; max-width:300px" controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

Potete aggiungere un'immagine di sfondo, che appare prima dell'avvio del video, in questo modo:

<video style="width:100%; max-width:300px" controls poster="img.jpg">

Naturalmente, inserirete il percorso corretto della vostra immagine.






Fammi sapere se questo argomento ti è stato utile.
Se non ti è stato utile, potrai inviare le tue osservazioni. Grazie
Ti è stato utile questo argomento?
Si
No

Continua con:
E molto altro ancora se leggi:
Tutti gli argomenti