Mehrere HTML5-Videos mit jQuery pausieren und abspielen (0) indizieren lassen?

Ich habe eine Seite mit mehreren Videos. Sie können auf eine Miniaturansicht klicken, um jedes Video abzuspielen. Das Problem ist, dass bei mehr als 2 Videos das Klicken auf das dritte Vorschaubild das zweite Video nicht anhält, sodass 2 Videos gleichzeitig abgespielt werden. Ich benutze auch einefadeOut() um die Sichtbarkeit jedes Videos umzuschalten. Dies funktioniert unabhängig von der Anzahl der Videos. Daher denke ich, dass das Problem bei der istget(0) Teil des Codes.

Hier ist eine jsfiddle, die das Problem anzeigt:http://jsfiddle.net/trpeters1/EyZdy/28/

Außerdem ist hier ein ausführlicherer Codeblock, der das Problem klarstellen sollte:

<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>

und das 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>

Antworten auf die Frage(3)

ich habe nachvollzogen, was du über das Zurücksetzen aller Videos und eine verallgemeinerbarere Lösung gesagt hast.http://jsfiddle.net/trpeters1/EyZdy/52

 Adam05. Apr. 2012, 14:04
Upvoted und gewählt.
 tim peterson05. Apr. 2012, 00:02
Ich habe es nur hochgestuft, ich denke, Adam ist der einzige, der es als akzeptierte Lösung markieren kann, seit er die Frage geschrieben hat
 tim peterson09. Sept. 2016, 00:49
Ersetzen Sie trpeters1 durch timrpeterson und es sollte funktionieren
 Scott Hamper04. Apr. 2012, 23:53
Ich bin froh, dass ich dir helfen konnte! Würde es Ihnen etwas ausmachen, meine Antwort als akzeptierte Lösung zu markieren, damit ich einen Repräsentanten bekomme? :)
 Rachel Gallen28. Feb. 2017, 13:15
 Sandy08. Sept. 2016, 18:19
@timpeterson Link ist tot. Ich weiß, dass es alt ist, aber es ist immer noch tot.

um mit JQUERY nur ein HTML5-Videoelement auf einer Seite abzuspielen:

<code>$(function() {
$("video").each(function() {
    this.pauseOthers = function(event) {
        $('video').addClass('stopvideo');
        $(this).removeClass('stopvideo');
        $('.stopvideo').each(function() {
            this.pause();
        });
    };
    this.addEventListener("play", this.pauseOthers.bind(this), false);
});
});
</code>
Lösung für das Problem

Wenn Sie Folgendes tun:

<code>$('.video_2,.video_3,.video_4,.video_5,.video_6').get(0)
</code>

"get (0)" gibt das erste Element zurück, das dem Selektor entspricht - in diesem Fall nur das erste Element, das ".video_2" entspricht. Der Rest der Videos wird ignoriert. Wenn Sie eine Aktion für alle ausgewählten Elemente ausführen möchten, lesen Sie "jQuery's".jeder()msgstr "" ". Sie können Ihren Code auch auf einen allgemeineren Ansatz reduzieren, indem Sie Folgendes tun:

<code><a href="#" class="video-thumbnail" data-video-id="video-1">Video 1</a>
<a href="#" class="video-thumbnail" data-video-id="video-2">Video 2</a>

<video id="video-1"> ... </video>
<video id="video-2"> ... </video>
</code>

Und dann schließen Sie JS folgendermaßen an:

<code>$('.video-thumbnail').on('click', function () {
    // Just go ahead and pause/reset all the video elements
    $('video').each(function () {
        this.pause();
        this.currentTime = 0;
    });

    $('#' + $(this).data('video-id')).get(0).play();
});
</code>

Ich habe das gerade von meinem Kopf aus getippt, aber hoffentlich bringt es Sie in die richtige Richtung.

 tim peterson04. Apr. 2012, 23:45
danke P1aincloth3sM4n, ich habe nachvollzogen, was du über das Zurücksetzen aller Videos gesagt hast, hier ist eine funktionierende Lösung ...jsfiddle.net/trpeters1/EyZdy/52
 Adam05. Apr. 2012, 14:04
Klappt wunderbar. Ausgezeichnete Arbeit. Hab meinen Speck gerettet. ich macheLiebe Mein Speck.
 Adam04. Apr. 2012, 23:51
Auch Sie, P1aincloth3sM4n, sind ein Champion ...
 Sandy08. Sept. 2016, 18:19
@timpeterson Link ist tot. Ich weiß, dass es alt ist, aber es ist immer noch tot.

Ihre Antwort auf die Frage