Come fare a

Player per video o musica

Sommario:
NOTA: Le indicazioni qui riportate vengono verificate, periodicamente, grazie alle segnalazioni inviate dagli utenti tramite i pulsanti appositi. La data dell'avvenuta verifica appare sotto al pulsante relativo. Se la verifica non ha apportato modifiche, significa che non sono stati riscontrati reali malfunzionamenti. In questo caso, potete contattarmi (vedi "parla con me" a fondo pagina) e sarò lieta di aiutarvi a risolvere le difficoltà che state incontrando.
Per cortesia, non inviate segnalazioni ripetute, o non veritiere, che creerebbero perdite di tempo a scapito del lavoro utile per tutti. Grazie


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

Player Youtube in html5:

Youtube stesso fornisce il codice per incorporare i suoi video 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>

verificato su segnalazione in data 10 aprile 2019

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, può 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>

Altri parametri possono essere aggiunti separandoli con & (es: &loop=1, &controls=1). Vedi l'elenco dei parametri supportati: Parametri del player.

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. Naturalmente, il player invisibile dovrà sempre avere l'autoplay.
<iframe height="1" style="display: block; margin:0 auto; border: 0;" 
src="https://www.youtube.com/embed/XXXXXXXX?autoplay=1"
allowfullscreen></iframe>

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>
verificato su segnalazione in data 21 marzo 2019

Al posto di "file.mp3", e/o "file.ogg" mettete l'indirizzo del brano che volete riprodurre. Il formato ogg è 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.

NOTA: Per le leggi sul copyright, è proibito a chiunque il riprodurre pubblicamente brani di altro autore, se non sono passati 70 anni dalla sua morte.

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.

NOTA: affinchè i video vengano riprodotti con autoplay anche su iphone e ipad, è necessario aggiungere le regole: muted playsinline.
Fammi sapere se questo argomento ti è stato utile.
Se non lo è stato, puoi inviarmi le tue osservazioni. Grazie 
Continua con: