PDA

View Full Version : Video playlist in html 5


Mircodora1
15-03-2015, 22:46
Ciao a tutti.

Avrei bisogno di una informazione.

Non potendo accorpare tre video in uno solo vorrei sapere se è possibile creare in html 5 una specie di "playlist" molto semplice partendo dal tradizionale tag video.

codice HTML:
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
</video>
In teoria si dovrebbe passare senza interruzioni dal video1 al video2 e dal video2 al video3 per poi continuare in loop all'interno dello stesso player video.

E' possibile?

Mircodora1
17-03-2015, 13:12
>
> Questo è il codice che ho inserito:
>
> <!-- Html -->
>
> <video id="video" src=".sitiinternetonline.com/test/wp-content/uploads/2015/03/test1.mp4" autoplay /></video>
>
> <!-- Css -->
>
> <style>
> video {
> background: #333;
> width: 320px;
> height:240px;
> }
> </style>
>
> <!-- Javascript -->
>
> <script>
> var videoPlayer= document.getElementById('video');
>
> videoPlayer.addEventListener('ended', function(){
> this.pause();
>
> var videos = [
> "test1",
> "test2",
> "test3",
> "test4",
> "test5",
> "test6",
> "test7",
> "test8",
> "test9",
> "test10",
> "test11",
> "test12",
> ], videos = videos[Math.floor( Math.random() * videos.length)];
>
> this.src = ".sitiinternetonline.com/test/wp-content/uploads/2015/03/" + videos + ".mp4";
>
> }, false);
> </script>
>
> Come potete vedere ora il player carica 12 video diversi ma in funzione random. Se io volessi farli vedere in sequenza dall'1 al 12 come dovrei fare?.
>
> Sicuramente bisgnerebbe inserire un contatore ma non ho idea di come farlo funzionare. Ho provato in diversi modi ma non funzionano.

OoZic
17-03-2015, 23:57
Alcuni errori che stai facendo
- hai messo l'array all'interno dell'evento "ended", vuol dire che viene ricreato ogni volta
- stai ripetendo test1, test2, test3,... quando cambia solo il numero, tanto vale tenere "test" + i come variabile no?
- la riga videos[...math.random...] e' dove viene preso un video random dall'array, banalmente sceglie un random all'interno del range dell'array.
- utilizza il tag CODE per formattare il codice qui sul forum o non si capisce una fava :D


var videoPlayer = document.getElementById('video');

// memorizza la tua variabile indice, partendo da zero
var i = 1;

videoPlayer.addEventListener('ended', function() {
this.pause();

// se non siamo arrivati alla fine, 13 perche' partiamo da 1
if (i < 13) {

// incrementiamo l'indice di 1 cosi prende il video successivo
i = i + 1;
this.src = ".sitiinternetonline.com/test/wp-content/uploads/2015/03/test" + i + ".mp4";
}


}, false);

MicheleRaponi
18-03-2015, 09:38
Non potendo accorpare tre video in uno solo vorrei sapere se è possibile creare in html 5 una specie di "playlist" molto semplice partendo dal tradizionale tag video.

In teoria si dovrebbe passare senza interruzioni dal video1 al video2 e dal video2 al video3 per poi continuare in loop all'interno dello stesso player video.

E' possibile?

Guarda qui: http://jsfiddle.net/gvtodkod/

OoZic
18-03-2015, 10:18
Guarda qui: http://jsfiddle.net/gvtodkod/

:winner: