javascript - 在 slider 内控制 HTML5 视频

Question

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

注意:我只找到了一个在线托管的可用视频，因此 slider 包含 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');
});