pausing and playing multiple HTML5 videos using jQuery get(0) indexing?

I have a page of several videos. One can click a thumbnail to play each video. The problem is for that for greater than 2 videos, the clicking on the 3rd thumbnail doesn't pause the 2nd video so I get 2 videos playing at the same time. I'm also using a fadeOut() to toggle the visibility of each video and this works fine regardless of the number of videos. Therefore, I think the issue is with the get(0) part of the code.

here's a jsfiddle that displays the problem: http://jsfiddle.net/trpeters1/EyZdy/28/

Additionally, here's a more verbose block of code that should make the problem clear:

$(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();
            });
      });
});

and the html:

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

Answers


When you do the following:

$('.video_2,.video_3,.video_4,.video_5,.video_6').get(0)

the "get(0)" returns the first element that matches the selector - in this case, just the first element that matches ".video_2". The rest of the videos are ignored. To do an action on all of the selected elements, check out jQuery's "each()" method. Also, you can simplify your code down to a more generic approach by doing something like this:

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

And then hooking up JS by doing something like this:

$('.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();
});

I've just typed this from my head, but hopefully it will put you in the right direction.


Need Your Help

Append string from between starting from end

php wordpress wordpress-plugin

$str = http://captoons2.se7enmarketing.com/wp-content/uploads/2014/06/eden-apple.jpg

How Should I Design Views For Multistep Registration Form At Iphone

iphone view

I am designing registration form at iphone but i am confused about best approach.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.