HTML Video настроить

281

08 августа 2017, 17:48

Здравствуйте, есть у меня вот такая разметка

<div class="sect5__items">
                                <div class="sect5__items_item">
                                    <video src="video/video.mp4"></video>
                                    <div class="play"></div>
                                </div>
                                <div class="sect5__items_item">
                                    <video src="video/video.mp4"></video>
                                    <div class="play"></div>
                                </div>
                                <div class="sect5__items_item">
                                    <video src="video/video.mp4"></video>
                                    <div class="play"></div>
                                </div>
                                <div class="sect5__items_item">
                                    <video src="video/video.mp4"></video>
                                    <div class="play"></div>
                                </div>
                                <div class="sect5__items_item">
                                    <video src="video/video.mp4"></video>
                                    <div class="play"></div>
                                </div>
                                <div class="sect5__items_item">
                                    <video src="video/video.mp4"  controls></video>
                                    <div class="play"></div>
                                </div>
                            </div>

И такой jQuery код

var controls = {
        video: $("video"),
        playpause: $(".play")                 
    };
    var video = controls.video[0];
    controls.playpause.click(function(){
        if (video.paused) {
            video.play();
            $('.play').css('opacity', '0');
        } else {
            video.pause();
        }   
        $(this).toggleClass("paused"); 
    });

В данном варианте, при нажатии на любое видео открывается только первое видео и сколько я не пробовал вариантов, ничего у меня не получилось, а надо бы, чтобы при нажатии на play открывалось видео только этого родителя, а не других или как в даннном случае только первого. Может можно как-то эту проблему решить?

Answer 1

Добавил всем кнопкам изначальный класс paused для удобства Реализация простая и подойдет только по указанной вами html разметке

var controls = { 
        video: $("video"), 
        playpause: $(".play")                  
    }; 
    //Клик на playpause 
    controls.playpause.on('click', function(){ 
        //Проверка класса кнопки 
        if ($(this).hasClass("paused")) { 
            //Делаем эту кнопку невидимой 
            $(this).css('opacity', '0'); 
            //Находим соседа кнопки который в верху (в нашем случае video) и включаем (get(0) необзодим т.к. play() не является функцией jquery, get(0) вернет чистый html документ 
            $(this).prev().get(0).play(); 
            $(this).toggleClass("paused");  
        } 
    }); 
    controls.video.on('click', function(){ 
        $(this).next().css('opacity', '1'); 
        $(this).next().toggleClass("paused"); 
        $(this).removeAttr("controls", "0"); 
        $(this).get(0).pause(); 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="sect5__items"> 
    <div class="sect5__items_item"> 
        <video src="test.mp4"></video> 
        <div class="play paused">test play</div> 
    </div> 
 
    <div class="sect5__items_item"> 
        <video src="video/video.mp4"></video> 
        <div class="play paused"></div> 
    </div> 
 
    <div class="sect5__items_item"> 
        <video src="video/video.mp4"></video> 
        <div class="play paused"></div> 
    </div> 
 
    <div class="sect5__items_item"> 
        <video src="video/video.mp4"></video> 
        <div class="play paused"></div> 
    </div> 
 
    <div class="sect5__items_item"> 
        <video src="video/video.mp4"></video> 
        <div class="play paused"></div> 
    </div> 
 
    <div class="sect5__items_item"> 
        <video src="video/video.mp4"  controls></video> 
        <div class="play paused"></div> 
    </div> 
</div>