Controlling HTML5 Video within slider

Question

I have created a custom video slider that loops through 4 videos. I have a custom play button over each video and some overlay content over each as well. When the video is played, both the overlay content and play button fade out and the default video controls come into view. My problem is that no matter which video's play button is clicked. It only plays the first video in the slider. I know I need to target each video's play button and relate it to that video, I just can't for the life of me figure out how to do it. Here's my html:

And my javascript/jQuery:

$(document).ready(function() {

        var sliderVideo = document.getElementById('video-slider');
        var sliderVideo = $('#slider-video').get(0);
        var sliderVideo = $('#slider-video');
        var sliderOverlay = $('.video-slider .overlay-content');

        $('.play-button').on('click', function() {
            sliderVideo[0].play();
            sliderOverlay.fadeOut('fast');
            $(this).hide()
        });

        sliderVideo.on('play', function(e) {
            $(this).attr('controls', 'true');
        })

    });

blex · Accepted Answer

I took the liberty of simplifying your HTML a little:

And here is a way of doing what you want to do (according to the new HTML structure):

$('.play-button').on('click', function () {
    $(this).hide();
    $(this).parent().fadeOut();
    $(this).parent().siblings('.slider-video')[0].play();
});

$('.slider-video').on('play', function () {
    $(this).attr('controls', '1');
});

JS Fiddle Demo

Note: I only found one usable video hosted online, so the slider contains 2 identical videos.

Edit

If you want to keep your HTML as it is, this should work:

$('.play-button').on('click', function () {
    $(this).hide();
    $(this).siblings('.overlay-content').fadeOut();
    $(this).siblings('.slider-video')[0].play();
});

$('.slider-video').on('play', function () {
    $(this).attr('controls', '1');
});

Controlling HTML5 Video within slider

Answers (1)

JS Fiddle Demo

Edit

Related Questions