PROBLEMA video playlist in html 5

Pubblicità
M

Mircodora

Nuovo Utente
Messaggi
2
Reazioni
0
Punteggio
23
video playlist in html 5

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:
<videowidth="320"height="240"controls>
<sourcesrc="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?​
 
>
> 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.
 
Mircodora ha detto:
>
> 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.
Clicca per espandere...

Codice: 
<!DOCTYPE html>
<html>
<body>


<video id="v1" width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
</video>


</body>


<script>
var videos = ["movie.mp4", "mov_bbb.mp4"];
var i = 0;


var video = document.getElementById('v1');
video.onended = function(e) {
  i++;
  video.src = videos[i];
  video.play();
};
</script>
</html>
Ti basta usare un contatore per avanzare nell'array. Puoi provare lo script incollandolo qui, i video sono presi da lì.
 
Pubblicità
Pubblicità
Indietro
Top