在滑块内控制HTML5视频 [英] Controlling HTML5 Video within slider

问题描述

我创建了一个自定义视频滑块，该滑块可循环播放4个视频.我在每个视频上都有一个自定义播放按钮，在每个视频上也有一些重叠内容.播放视频时，重叠内容和播放按钮都会淡出，并且默认视频控件会出现.我的问题是，无论单击哪个视频的播放按钮.它仅播放滑块中的第一个视频.我知道我需要定位每个视频的播放按钮，并将其与该视频相关联，但我一生都无法弄清楚该如何做.这是我的html:

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:

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

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

    });

推荐答案

我采取了一些简化HTML的自由方式:

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>

这是一种完成您想要做的事情的方法(根据新的HTML结构):

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小提琴演示

注意:我仅发现一个在线托管的可用视频，因此滑块包含2个相同的视频.

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

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

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

这篇关于在滑块内控制HTML5视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！