pausando e reproduzindo vários vídeos HTML5 usando jQuery get (0) indexing?
Eu tenho uma página de vários vídeos. Pode-se clicar em uma miniatura para reproduzir cada vídeo. O problema é que para mais de dois vídeos, o clique na terceira miniatura não pausa o segundo vídeo, então eu recebo dois vídeos ao mesmo tempo. Eu também estou usando umfadeOut()
para alternar a visibilidade de cada vídeo e isso funciona bem, independentemente do número de vídeos. Portanto, acho que a questão é com oget(0)
parte do código.
aqui está um jsfiddle que mostra o problema:http://jsfiddle.net/trpeters1/EyZdy/28/
Além disso, aqui está um bloco de código mais detalhado que deve esclarecer o problema:
<code>$(function(){ $('#video_1,#video_2,#video_3,#video_4,#video_5,#video_6').hide(); $('.icon_1').click(function(){ $('#video_2,#video_3,#video_4,#video_5,#video_6').fadeOut(function(){ $('#video_1').fadeIn(); $('.video_2,.video_3,.video_4,.video_5,.video_6').get(0).pause(); $('.video_2,.video_3,.video_4,.video_5,.video_6').get(0).currentTime = 0; $('.video_1').get(0).play(); }); }); $('.icon_2').click(function(){ $('#video_1,#video_3,#video_4,#video_5,#video_6').fadeOut(function(){ $('#video_2').fadeIn(); $('.video_1,.video_2,.video_4,.video_5,.video_6').get(0).pause(); $('.video_1,.video_2,.video_4,.video_5,.video_6').get(0).currentTime = 0; $('.video_2').get(0).play(); }); }); $('.icon_3').click(function(){ $('#video_1,#video_2,#video_4,#video_5,#video_6').fadeOut(function(){ $('#video_3').fadeIn(); $('.video_1,.video_2,.video_4,.video_5,.video_6').get(0).pause(); $('.video_1,.video_2,.video_4,.video_5,.video_6').get(0).currentTime = 0; $('.video_3').get(0).play(); }); }); }); </code>
e o html:
<code><div id="video_1"> <div id="mediaplayer">cadillac</div> <video class="video_1" width="100%" height="100%" controls="controls"> <source src="videos/cadillac_x264.mp4" type="video/mp4" /> <object data="videos/cadillac_x264.mp4" width="100%" height="100%"> </object> </video> </div> <div id="video_2"> <div id="mediaplayer2">nike</div> <video class="video_2" width="100%" height="100%" controls="controls"> <source src="videos/Nike_Pretty - Computer_x264.mp4" type="video/mp4" /> <object data="videos/Nike_Pretty - Computer_x264.mp4" width="100%" height="100%"> </object> </video> </div> <div id="video_3"> <div id="mediaplayer3">russian standard</div> <video class="video_3" width="100%" height="100%" controls="controls"> <source src="videos/Russian_Standard.mp4" type="video/mp4" /> <object data="videos/Russian_Standard.mp4" width="100%" height="100%"> </object> </video> </div> </code>