Mappa del sito
Player per video o musica
Visita anche Risorse per i webmasterarchivio di risorse per la creazione dei siti web
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 codice 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.
È evidente che se una codice specifico è accompagnato da un esempio funzionante, tale codice è corretto. In caso contrario, anche l'esempio non funzionerebbe più.
Per cortesia, non inviate segnalazioni senza verificare. Grazie
Per verificare i vostri codici, prima di inserirli, potete usare l'HTML editor.
Player Youtube
Esempio funzionante:Youtube stesso fornisce il codice per incorporare i suoi video cliccando su "Condividi", sotto al video e poi su "Incorpora".
NOTA: non tutti i video possono essere incorporati. Se, al posto del video, appare l'avviso "Video non disponibile", significa che l'autore del caricamento non ha reso il video disponibile, oppure non è disponibile nella tua posizione geografica, o altro ancora.
Il codice, personalizzato e semplificato, è 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.
Attenzione a non sostituire tutto l'URL, ma solo l'ID prelevandolo da quello del video in YouTube.
Esempio: https://www.youtube.com/watch?v=GZidV5Z2Oh8
La parte in rosso va sostituita alle crocette nel codice iframe. Il parametro relativo ad autoplay, può essere inserito dopo l'URL, in questo modo:
<iframe width="640" height="360" style="display: block; margin:0 auto; border: 0;" src="https://www.youtube.com/embed/XXXXXXXXXXXX?autoplay=1" allowfullscreen ></iframe>
NOTA: su alcuni dispositivi mobili il parametro autoplay deve essere accompagnato dai parametri "mute" e "controls", altrimenti il player non funzionerà.
I parametri si possono aggiungere separandoli con & (es: &loop=1, &controls=1). Attenzione al punto di domanda dopo l'ID.
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>
NOTA: È possibile disattivare i cookie di YouTube, in modo che non vengano trasmessi tramite il proprio sito selezionando la voce: "Abilita modalità di privacy avanzata". Guida ufficiale:
Supporto Google,
Player YouTube responsive
Il player YouTube, essendo un iFrame, non è responsive. Per poterlo caricare in una pagina web responsive è necessario inserirlo in un contenitore con determinate regole di stile.Le regole sono queste:
<style>
.rwd-video {
height: 0;
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
}
.rwd-video iframe {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
</style>
.rwd-video {
height: 0;
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
}
.rwd-video iframe {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
</style>
E l'iFrame si inserisce in questo modo:
<div class="rwd-video">
<iframe width="640" height="360" style="display: block; margin:0 auto; border: 0;" src="https://www.youtube.com/embed/aheD2VJ38ks" allowfullscreen ></iframe>
</div>
<iframe width="640" height="360" style="display: block; margin:0 auto; border: 0;" src="https://www.youtube.com/embed/aheD2VJ38ks" allowfullscreen ></iframe>
</div>
In alternativa, è possibile utilizzare uno script: Adjust Iframes script.
Player YouTube con playlist
Ci sono due modi per riprodurre una playlist con il player di YouTube.Primo metodo, classico:
Esempio funzionante:ATTENZIONE: la riproduzione delle playlist personali funzionerà solo online.
Se volete provare il codice funzionante, potete farlo con questo HTML editor
Codice:
<iframe width="560" height="315" style="display: block; margin:0 auto; border: 0;" src="https://www.youtube.com/embed/videoseries?list=PLXXXXXXXXXXXX&loop=1&autoplay=1" allowfullscreen></iframe>
Al posto delle X l'ID della playlist creata in YouTube.
Fate attenzione che deve esserci il PL iniziale (l'ho lasciato per riferimento) e, se nel link del video il PL è seguito da lineette, dovete mettere anche quelle.
Es: PL--291IW7FfxnH6-JpcuouM-hpQRScJi6
NOTA: i parametri (autoplay ecc), nel caso della playlist, non devono essere preceduti dal punto di domanda (?).
Secondo metodo, video selezionati:
Esempio funzionante:ATTENZIONE: la riproduzione dei video personali funzionerà solo online.
Se volete provare il codice funzionante, potete farlo con questo HTML editor
Codice:
<iframe width="640" height="360" style="display: block; margin:0 auto; border: 0;" src="https://www.youtube.com/embed?playlist=XXXXXXXXX,XXXXXXXXX,XXXXXXXXXX&loop=1&autoplay=1" allowfullscreen></iframe>
Si inseriscono in sequenza le ID dei video singoli da riprodurre, separati da una virgola, al posto delle rispettive X colorate nell'esempio.
Ne potete aggiungere quanti volete dopo l'url del primo che precede l'elenco degli ID dei successivi.
Player YouTube con video random
Per avere un player in cui il video cambia all'aggiornamento della pagina, potete usare questo codice:
<iframe class="frame" width="640" height="360" src="" ></iframe>
<script>
var cat1 = [
"https://www.youtube-nocookie.com/embed/XXXXXXXXX",
"https://www.youtube-nocookie.com/embed/XXXXXXXXX",
];
var myFrame = document.getElementsByClassName("frame")[0];
function getRandomUrl(myFrame) {
var index = Math.floor(Math.random() * cat1.length);
var url = cat1[index];
myFrame.src = url;
}
function codeAddress() {
getRandomUrl(myFrame);
}
codeAddress();
console.log(myFrame.src);
</script>
<script>
var cat1 = [
"https://www.youtube-nocookie.com/embed/XXXXXXXXX",
"https://www.youtube-nocookie.com/embed/XXXXXXXXX",
];
var myFrame = document.getElementsByClassName("frame")[0];
function getRandomUrl(myFrame) {
var index = Math.floor(Math.random() * cat1.length);
var url = cat1[index];
myFrame.src = url;
}
function codeAddress() {
getRandomUrl(myFrame);
}
codeAddress();
console.log(myFrame.src);
</script>
Naturalmente, potete aggiungere quanti video volete.
Player HTML5
Semplice player in html5 per caricare un brano personale
Esempio funzionante:Nota: il player ha un aspetto diverso a seconda del browser in uso. Per visualizzare tutti i controlli su Safari, è necessario inserire l'url del brano per esteso.
Codice:
<audio style="width:100%; max-width:300px" controls>
<source src="file.mp3" type="audio/mpeg">
Your browser does not support HTML5 audio
Please use this link instead:
<a href="">Titolo</a>
</audio>
<source src="file.mp3" type="audio/mpeg">
Your browser does not support HTML5 audio
Please use this link instead:
<a href="">Titolo</a>
</audio>
Al posto di "file.mp3", e/o "file.ogg" mettete l'indirizzo del brano che volete riprodurre. Potete aggiungere (o togliere) i formati che desiderate.
Il formato mp3 è ormai universalmente supportato con rare eccezioni. Per sicurezza, potete inserire più formati.
Potete aggiungere altre funzioni, come autoplay e loop, semplicemente facendole seguire a controls in questo modo:
" ... controls loop autoplay ... "
Per centrare il player aggiungete queste regole: display:block; margin: 0 auto;.
Impostate una larghezza massima per il player. L'altezza verrà impostata automaticamente in proporzione.
Se mettete dimensioni fisse il player non sarà responsive.
Togliendo "controls" il player sarà invisibile. Naturalmente sarà necessario aggiungere "autoplay" per farlo partire in automatico e anche "loop" se si desidera che il brano venga ripetuto quando termina.
La seguente dicitura (facoltativa) verrà visualizzata solo dagli utenti il cui browser non supporta audio o video in html5. Potete cambiare il testo come desiderate.
Il campo per l'url serve ad aprire il video in una finestra separata:
"Your browser does not support HTML5 video
Please use this link instead:
<a href="">Titolo</a>"
Per un player con playlist, visita Player audio con playlist
Semplice player in html5 per caricare un video
Esempio funzionante:Vale quanto detto per il player audio.
Togliendo "controls" i comandi non appariranno e sarà necessario far partire il video in autoplay.
Codice:
<video style="width:100%; max-width:400px" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support HTML5 video
Please use this link instead:
<a href="">Titolo</a>
</video>
<source src="video.mp4" type="video/mp4">
Your browser does not support HTML5 video
Please use this link instead:
<a href="">Titolo</a>
</video>
L'immagine di sfondo (opzionale), che appare prima dell'avvio del video nell'esempio, viene aggiunta in questo modo:
<video style="width:100%; max-width:400px" controls poster="img.jpg">
Naturalmente, inserirete il percorso corretto della vostra immagine.
NOTA: affinchè i video funzionino anche su iphone e ipad, quando vengono riprodotti in autoplay (per esempio se usati come background), è necessario aggiungere le regole: muted playsinline. Questo è indispensabile anche per il caricamento di più video nella stessa pagina.
Anche per i video valgono le regole di copyright citate per i brani musicali.
Il formato video mp4 è supportato da tutti browser. Se dovete convertire un video in questo formato, fate attenzione ad usare un buon convertitore, perchè una conversione di cattiva qualità potrebbe pregiudicare la visualizzazione sui dispositivi mobili.
Per la mia esperienza personale, posso consigliarvi questo ottimo convertitore online:
https://convert-video-online.com/it/
Per un player con playlist, visita Player video con playlist
Attributi audio/video HTML5
Autoplay
Se questo attributo è presente, la risorsa audio/video inizierà automaticamente a essere riprodotto non appena possibile senza interrompersi per completare il caricamento dei dati.
Autobuffer
Se questo attributo è presente, il video inizierà automaticamente il buffering (caricamento dei dati) anche se non è impostato per la riproduzione automatica.
Controls
Se questo attributo è presente, consentirà all'utente di controllare la riproduzione della risorsa audio/video, inclusi volume, ricerca e pausa/ripresa della riproduzione.
Width
Questo attributo specifica la larghezza dell'area di visualizzazione del video, in pixel.
Height
Questo attributo specifica l'altezza dell'area di visualizzazione del video, in pixel.
Loop
Se questo attributo è presente, consentirà alla risorsa audio/video di tornare automaticamente all'inizio dopo aver raggiunto la fine.
Preload
Se questo attributo è presente, la risorsa audio/video verrà caricata al caricamento della pagina, pronta per essere eseguita. Per caricare il video dopo il caricamento della pagina, aggiungere preload="none". L'attributo viene ignorato se è presente l'autoplay.
Poster
URL dell'immagine da mostrare finché l'utente non avvia il video.
Muted
Se questo attributo è presente, specifica che l'uscita audio del video deve essere silenziata.
Playsinline
Se questo attributo è presente, blocca l'impostazione predefinita che apre il video a schermo intero durante la riproduzione.
Se questo attributo è presente, la risorsa audio/video inizierà automaticamente a essere riprodotto non appena possibile senza interrompersi per completare il caricamento dei dati.
Autobuffer
Se questo attributo è presente, il video inizierà automaticamente il buffering (caricamento dei dati) anche se non è impostato per la riproduzione automatica.
Controls
Se questo attributo è presente, consentirà all'utente di controllare la riproduzione della risorsa audio/video, inclusi volume, ricerca e pausa/ripresa della riproduzione.
Width
Questo attributo specifica la larghezza dell'area di visualizzazione del video, in pixel.
Height
Questo attributo specifica l'altezza dell'area di visualizzazione del video, in pixel.
Loop
Se questo attributo è presente, consentirà alla risorsa audio/video di tornare automaticamente all'inizio dopo aver raggiunto la fine.
Preload
Se questo attributo è presente, la risorsa audio/video verrà caricata al caricamento della pagina, pronta per essere eseguita. Per caricare il video dopo il caricamento della pagina, aggiungere preload="none". L'attributo viene ignorato se è presente l'autoplay.
Poster
URL dell'immagine da mostrare finché l'utente non avvia il video.
Muted
Se questo attributo è presente, specifica che l'uscita audio del video deve essere silenziata.
Playsinline
Se questo attributo è presente, blocca l'impostazione predefinita che apre il video a schermo intero durante la riproduzione.
Volume di default in un player HTML5
È possibile impostare il volume di default aggiungendo questa regola al player:onloadstart="this.volume=0.5"
Video HTML5 con link
Se volete rendere il video cliccabile, molto semplicemente lo racchiudete nel codice del collegamento.Esempio:
<a href="URLcollegamento" target=_blank">
<video style="width:100%; max-width:300px" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support HTML5 video
Please use this link instead:
<a href="">Titolo</a>
</video></a>
<video style="width:100%; max-width:300px" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support HTML5 video
Please use this link instead:
<a href="">Titolo</a>
</video></a>
Visualizzazione dei controlli di video e audio sui diversi browser
Player HTML5 multipli
Se caricate più player nella stessa pagina, potete utilizzare questo script al fine di interrompere automaticamente la riproduzione di un brano (o video) se viene avviata la riproduzione di un nuovo brano.Codice:
<script>
window.addEventListener("play", function(evt)
{
if(window.$_currentlyPlaying && window.$_currentlyPlaying != evt.target)
{
window.$_currentlyPlaying.pause();
}
window.$_currentlyPlaying = evt.target;
}, true);
</script>
window.addEventListener("play", function(evt)
{
if(window.$_currentlyPlaying && window.$_currentlyPlaying != evt.target)
{
window.$_currentlyPlaying.pause();
}
window.$_currentlyPlaying = evt.target;
}, true);
</script>
Player con file audio caricato in Google Drive
Trovi la guida nella pagina Google Drive guide varie alla voce "Google Drive, embed file audio".Caricamento di audio e video in differita (defer)
Visita la pagina La pagina web perfettaRisorse per audio e video
Visita la pagina Risorse audio e video
Continua con:
Leggi anche: Creare un sito da zero