2011-11-17 9 views
5

ahora tengo una serie de videos. ¿Cómo lo hago así que cuando hago clic en siguiente y previno el video siguiente o anterior en la matriz se carga.llamando al siguiente artículo en mi matriz

<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

En un atributo onclick, se asume javascript, por lo que no es necesario preceder a su llamada de función con 'javascript:'. También recomiendo comenzar con jQuery si aún no lo ha hecho. – benekastah

Respuesta

2

El uso de código de yout, va a ser algo como esto. Lo que necesita hacer es tener el video que cargó en una variable de JavaScript. Luego, cuando hace clic en prev o next puede llamar a una función que colocará el número de video correcto y lo llamará.

<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

cuando implemente esto devolviendo falso, ¿escribo next goetzs

+0

esto todavía no parece estar funcionando – goetzs

+0

puede tener algunos errores porque lo hice por cabeza. Ver @brpyne respuesta y usar mis taughts. Él dice que su código es correcto. –

1

Introducir la variable que permitirá ahorrar índice de vídeo actual, y luego incrementarlo o disminuirlo cada vez que se pulsa siguiente/ant

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

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

esto se romperá al llegar al último elemento de matriz y presione siguiente :) –

1

Parece que se está perdiendo otro signo más de su operador de incremento .

intente cambiar

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

Para este

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

esto se romperá al llegar al último elemento de matriz. –

+0

Esto es correcto. Pensé que manejarías ese tipo de lógica después de resolver tu primer problema. Los errores de sintaxis como ese pueden ser supervisados ​​fácilmente, me he golpeado la frente al menos cien veces sobre cosas así. – brpyne

1

Envuelta alternativo con envolvente;

<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

ahora esto es más parecido :) –

+0

es posible poner múltiples tipos de fuente en la matriz – goetzs

+0

¿Qué tipo de hombre por tipo de fuente? –

Cuestiones relacionadas