wstrzymywanie i odtwarzanie wielu filmów HTML5 przy użyciu indeksowania jQuery get (0)?
Mam stronę z kilkoma filmami. Można kliknąć miniaturę, aby odtworzyć każde wideo. Problem polega na tym, że w przypadku więcej niż 2 filmów kliknięcie trzeciej miniatury nie wstrzymuje drugiego filmu, więc otrzymuję 2 filmy jednocześnie. Używam także afadeOut()
aby przełączyć widoczność każdego filmu i działa to niezależnie od liczby filmów. Dlatego myślę, że problem dotyczyget(0)
część kodu.
Oto jsfiddle wyświetlające problem:http://jsfiddle.net/trpeters1/EyZdy/28/
Dodatkowo mamy bardziej szczegółowy blok kodu, który powinien wyjaśnić problem:
<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>
i 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>