giovedì 12 maggio 2016

Inserire una playlist Youtube con inizio casuale in Blogger Blogspot

Partiamo da una playlist, ad esempio questa, da me creata in cui ho inserito i 28 video di Youtube più cliccati escludendo quelli che rendevano la playlist inascoltabile (video troppo lunghi o non musicali).
Ovviamente potete scegliere una qualsivoglia playlist di vostro gradimento
Clicchiamo come al solito su Condividi, Codice da incorporare per ottenere il codice standard per l'incorporamento del video, codice che poi andremo leggermente a modificare.
Vediamo prima l'esempio in pratica, con  la playlist parte in automatico da un brano scelto casualmente.

Abilita javascript per vedere la playlist



Il codice ottenuto da Youtube è il seguente, le parti in rosso e blu che sono state da me aggiunte a posteriori:

<iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?list=PL40LpAew8J_fGssNbFeqbmpvMcQNjBCGF&autoplay=1&index=5" frameborder="0" allowfullscreen></iframe>

autoplay=1 significa che la riproduzione automatica è abilitata

index=5 significa che la riproduzione della playlist deve partire dal video n°5 (il primo è il numero zero)

Se vogliamo che il video parte da una posizione casuale dobbiamo sostituire il numero che abbiamo indicato con un numero generato casualmente.

Solitamente questo problema viene affrontato utilizzando il linguaggio PHP ma su Blogspot non possiamo utilizzarlo e dobbiamo utilizzare javascript
La seguente riga d'esempio assegna alla variabile n un valore intero compreso fra 0 e 27

var n = Math.floor(Math.random() * 28);

All'interno del nostro post identifichiamo dove dovrebbe essere posizionato il video, invece di copiarci il codice generato da Youtube inseriamo un elemento html, una sezione "<div>"  a cui assegnare un determinato identificativo a nostro piacere, ad esempio video-1

<div id="video-1">
</div>


Il contenuto HTML della sezione "video-1" verrà quindi modificato utilizzando il modello DOM, che ci permette di identificare e modificare un qualsiasi elemento della pagina,  tramite uno script che viene eseguito all'apertura dell'articolo.
Copiare lo script seguente e inserirlo a fine articolo sempre in visualizzazione HTML
sostituendo la parte evidenziata in giallo con quella relativa alla vostra playlist. Potete eventualmente cambiare le dimensioni del video e altri parametri ma fate attenzione a come sono utilizzate le virgolette semplici e doppie.

<script type="text/javascript">
myFunction();
function myFunction() {

var n = Math.floor(Math.random() * 28);
var x = document.getElementById("video-1");

x.innerHTML='<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/videoseries?list=PL40LpAew8J_fGssNbFeqbmpvMcQNjBCGF&autoplay=1&index=' + n + '" width="560"></iframe>';
};
</script>
Se ti è piaciuto quello che hai letto o l'hai trovato utile e/o interessante lascia un segno del tuo passaggio: condividi sui social o lascia un commento. Grazie!

4 commenti:

  1. ho trovato molto utile questo tuo articolo sulla riproduzione con inizio casuale di una playlist YouTube su Blogspot
    Oltre a far partire la playlist con inizio da una posizione casuale (come hai, appunto, qui sopra ben spiegato) sarebbe possibile attivare anche la riproduzione dei video in sequenza casuale?
    Mi spiego meglio: con i codici che ci hai segnalato da incorporare, la riproduzione può partire da qualunque punto della playlist fra 1 e 27, ma poi dovrà necessariamente seguire l'ordine prestabilito. Nel caso partisse dal video n.3 poi riprodurrà il 4, il 5, il 6 e così via.
    E se invece volessimo che riproduca anche i successivi in modo casuale e non preordinato in base alla sequenza prestabilita dalla playlist?
    Ritieni sia possibile?
    E se sì, quali codici dovremmo variare e/o sostituire tra quelli sopra?
    Grazie mille per la tua pazienza e disponibilità.

    RispondiElimina
    Risposte
    1. Ciao, quello che mi chiedi è più o meno quello che avrei voluto fare quando ho scritto l'articolo, ma non ho trovato il modo di farlo. Per cui ho ripiegato sulla soluzione proposta.

      Elimina
    2. Attendo tuoi eventuali ulteriori approfondimenti sull'argomento.
      Grazie ancora.
      Sergio

      Elimina
    3. Ciao Sergio, grazie a te per il feedback!

      Elimina

Ringrazio tutti quelli che vorranno lasciare un commento o che seguiranno o sottoscriveranno il mio blog. Il linea di massima cercherò sempre di ricambiare.
Nel caso vogliate fare delle richieste o dei commenti off-topic ossia non collegati all'argomento dell'articolo, vi sarei grato se li postate sulla pagina Facebook del blog. Grazie!
Ho dovuto purtroppo attivare la moderazione a causa di alcuni commenti offensivi nei confronti di terzi.