在滑块内控制 HTML5 视频

Question

我创建了一个循环播放 4 个视频的自定义视频滑块。我在每个视频上都有一个自定义播放按钮，每个视频上都有一些覆盖内容。播放视频时，覆盖内容和播放按钮都会淡出，默认视频控件会出现。我的问题是，无论点击哪个视频的播放按钮。它只播放滑块中的第一个视频。我知道我需要定位每个视频的播放按钮并将其与该视频相关联，我只是无法为我的生活弄清楚如何去做。这是我的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-->

还有我的 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');
        })

    });

Answer 1

我冒昧地简化了您的 HTML：

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

这是一种做你想做的事的方法（根据新的HTML结构）：

$('.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

注意：我只找到了一个在线托管的可用视频，因此滑块包含 2 个相同的视频。

编辑

如果您想保持 HTML 原样，这应该可以：

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