javascript - Controlling HTML5 Video within slider - Stack Overflow

admin管理员组

文章数量:1434956

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

<div class="video-slider">
        <div class="main-wrap">
            <div class="slides-view">
                <div class="slides">
                    <div class="slide-gallery">
                        <div class="slide">
                            <video id="slider-video" poster="">
                                <source src="" type="" >
                            </video>
                            <div class="overlay-content">
                            </div>
                            <div class="play">
                                <a class="play-button"><img src="" /></a>
                            </div>
                        </div>
                        <div class="slide">
                            <video id="slider-video" loop poster="">
                                <source src="" type="" >
                            </video>
                            <div class="overlay-content">
                            </div>
                            <div class="play">
                                <a class="play-button"><img src="" /></a>
                            </div>
                        </div>
                        <div class="slide">
                            <video id="slider-video" loop poster="">
                                <source src="" type="" >
                            </video>
                            <div class="overlay-content">
                            </div>
                            <div class="play">
                                <a class="play-button"><img src="" /></a>
                            </div>
                        </div>
                        <div class="slide">
                            <video id="slider-video" loop poster="">
                                <source src="" type=">
                            </video>
                            <div class="overlay-content">
                            </div>
                            <div class="play">
                                <a class="play-button"><img src="" /></a>
                            </div>
                        </div>
                    </div><!--end slide-gallery-->
                </div><!--end slides-->
            </div><!--end slides-view-->
        </div><!--end main-wrap-->
        <div class="slide-arrow left">
            <a><img src="/sites/all/themes/merge/img/video-arrow-left.png" /></a>
        </div>
        <div class="slide-arrow right">
            <a><img src="/sites/all/themes/merge/img/video-arrow-right.png" /></a>
        </div>
    </div><!--end video-slider-->

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

    });

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

<div class="video-slider">
        <div class="main-wrap">
            <div class="slides-view">
                <div class="slides">
                    <div class="slide-gallery">
                        <div class="slide">
                            <video id="slider-video" poster="">
                                <source src="" type="" >
                            </video>
                            <div class="overlay-content">
                            </div>
                            <div class="play">
                                <a class="play-button"><img src="" /></a>
                            </div>
                        </div>
                        <div class="slide">
                            <video id="slider-video" loop poster="">
                                <source src="" type="" >
                            </video>
                            <div class="overlay-content">
                            </div>
                            <div class="play">
                                <a class="play-button"><img src="" /></a>
                            </div>
                        </div>
                        <div class="slide">
                            <video id="slider-video" loop poster="">
                                <source src="" type="" >
                            </video>
                            <div class="overlay-content">
                            </div>
                            <div class="play">
                                <a class="play-button"><img src="" /></a>
                            </div>
                        </div>
                        <div class="slide">
                            <video id="slider-video" loop poster="">
                                <source src="" type=">
                            </video>
                            <div class="overlay-content">
                            </div>
                            <div class="play">
                                <a class="play-button"><img src="" /></a>
                            </div>
                        </div>
                    </div><!--end slide-gallery-->
                </div><!--end slides-->
            </div><!--end slides-view-->
        </div><!--end main-wrap-->
        <div class="slide-arrow left">
            <a><img src="/sites/all/themes/merge/img/video-arrow-left.png" /></a>
        </div>
        <div class="slide-arrow right">
            <a><img src="/sites/all/themes/merge/img/video-arrow-right.png" /></a>
        </div>
    </div><!--end video-slider-->

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

    });

• javascript
• jquery
• html
• video
• html5-video

Share Improve this question Follow asked Mar 13, 2015 at 18:11 JordanBarberJordanBarber 2,10166 gold badges3737 silver badges6464 bronze badges 4

• IDs must be unique... Use a class .slider-video. And you overplicated your JS and got confused – blex Commented Mar 13, 2015 at 18:14
• Yea, that was my mistake, too many projects going on today. However...this does not solve my issue. All play buttons still only play the first video – JordanBarber Commented Mar 13, 2015 at 18:38
• Of course, you always tell it to play the first one: sliderVideo[0].play();. I'm making a JS Fiddle. – blex Commented Mar 13, 2015 at 18:44
• Ah, I'm sorry I'm just not extremely skilled at javascript. Can you please help me correct this? – JordanBarber Commented Mar 13, 2015 at 19:02

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 1

I took the liberty of simplifying your HTML a little:

<div class="video-slider">
    <!-- SLIDE 1 -->
    <div class="slide">
        <video class="slider-video" poster="">
            <source src="" type="" />
        </video>
        <div class="overlay-content">
            <div class="play-button"></div>
        </div>
    </div>
    <!-- SLIDE 2 -->
    <div class="slide">
        <video class="slider-video" poster="">
            <source src="" type="" />
        </video>
        <div class="overlay-content">
            <div class="play-button"></div>
        </div>
    </div>
    <!-- END OF SLIDES -->
    <div class="slide-arrow left"></div>
    <div class="slide-arrow right"></div>
</div>

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

本文标签： javascriptControlling HTML5 Video within sliderStack Overflow