2011-11-17 9 views
5

in questo momento ho una serie di video. Come faccio a farlo quando faccio clic su Avanti e previ il video successivo o precedente nei carichi dell'array.chiamando l'elemento successivo nel mio array

<video id="video" controls autoplay width="1000"> 
    <source src="videos/test.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> 
    <source src="videos/test.ogv" /> 
</video> 

<a href="#" onClick="javascript:vidSwap(vidURL[i+]); return false;">next</a> 



<script> 
var vidURL=["videos/test.ogv","videos/test2.ogv","videos/test3.ogv","videos/test4.ogv","videos/test5.ogv" ]; // literal array 
function vidSwap(vidURL) { 
var myVideo = document.getElementsByTagName('video')[0]; 
myVideo.src = vidURL; 
myVideo.load(); 
myVideo.play(); 
} 

+0

In un attributo onclick, si presuppone javascript, quindi non è necessario preimpostare la chiamata della funzione con 'javascript:'. Inoltre, ti consiglio di iniziare con jQuery se non lo hai già fatto. – benekastah

risposta

2

Usando il codice yout, sarà qualcosa di simile. Quello che devi fare è avere il video che hai caricato su una variabile javascript. Quindi, quando fai clic su prev o next puoi chiamare una funzione che inserirà il numero corretto del video e chiamarlo.

<script> 
var vidURL=["videos/test.ogv","videos/test2.ogv","videos/test3.ogv","videos"] 
var video = 0; 

function vidSwap() { 
    var myVideo = document.getElementsByTagName('video')[video]; 
    myVideo.src = vidURL[video]; 
    myVideo.load(); 
    myVideo.play(); 
} 


function prevVideo() { 
    if(video == 0) { 
    video = vidUrl.length; 
    } 
    else { 
    video -= 1; 
    } 

    vidSwap(); 
} 

function nextVideo() { 
    if(video == length) { 
    video = 0; 
    } 
    else { 
    video += 1; 
    } 

    vidSwap(); 
} 

</script> 


<video id="video" controls autoplay width="1000"> 
    <source src="videos/test.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> 
    <source src="videos/test.ogv" /> 
</video> 

<a href="#" onClick="javascript:prevVideo(); return false;">prev</a> 
<a href="#" onClick="javascript:nextVideo(); return false;">next</a> 
+0

quando implemento questo suo ritorno false, devo scrivere next goetzs

+0

questo ancora non sembra funzionare – goetzs

+0

potrebbe avere alcuni errori perché ho fatto da capo. Vedi la risposta @brpyne e usa i miei poteri. Dice che il suo codice è corretto. –

1

Introdurre variabile che farà risparmiare indice video corrente, quindi incrementare o decrementare ogni volta che si preme successivo/precedente

</script> 
var i = 0; 
<script> 

javascript:vidSwap(vidURL[i++]) 
+0

si interromperà quando si raggiunge l'ultimo elemento dell'array e si preme il prossimo :) –

1

Sembra che vi state perdendo un altro segno più nel vostro operatore di incremento .

Prova a cambiare

<a href="#" onClick="javascript:vidSwap(vidURL[i+]); return false;">next</a> 

Per questo

<a href="#" onClick="javascript:vidSwap(vidURL[i++]); return false;">next</a> 
+0

questo si interromperà quando si raggiunge l'ultimo elemento dell'array. –

+0

Questo è corretto. Ho pensato che avresti gestito quel tipo di logica dopo aver superato il tuo primo problema. Errori di sintassi come quello possono essere facilmente controllati, ho colpito la mia fronte almeno un centinaio di volte su cose del genere. – brpyne

1

Avvolto alternativo con avvolgente;

<a href="#" onClick="return Vids.next();">next</a> 
<a href="#" onClick="return Vids.prev();">prev</a> 

... 

var Vids = (function() { 
    var _currentId = -1; 
    var _urls = ["videos/test.ogv","videos/test2.ogv","videos/test3.ogv","videos/test4.ogv","videos/test5.ogv" ]; // literal array 
    return { 
     next: function() { 
      if (++_currentId >= _urls.length) 
       _currentId = 0; 
      return this.play(_currentId); 
     }, 
     prev: function() { 
      if (--_currentId < 0) 
       _currentId = _urls.length - 1; 
      return this.play(_currentId); 
     }, 
     play: function(id) { 
      var myVideo = document.getElementsByTagName('video')[0]; 
      myVideo.src = _urls[id]; 
      myVideo.load(); 
      myVideo.play(); 
      return false; 
     } 
    } 
})(); 
+0

ora è più simile :) –

+0

è possibile inserire più tipi di sorgenti nell'array – goetzs

+0

Cosa si fa per tipo di sorgente? –

Problemi correlati