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

Question

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').…

Accepted Answer

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: ``` Video 1 Video 2

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

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

Solution

Problem