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 paus

Answer 1

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.