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
thanks P1aincloth3sM4n, i followed what you said about reseting all videos and making a more generalizable solution, for those interested please see the following working jsfiddle: http://jsfiddle.net/trpeters1/EyZdy/52
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.
Easy solution to play only one HTML5 video element on page using JQUERY:
$(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);
});
});