<script>
$(document).ready(function(){

(function () {    
    
    let vidSlider1 = $('.uc-video-slider-1');
        
    let playList = {
      '2' : 'https://310401.selcdn.ru/MIXED/unchained_melody2.mp4',
      '4' : 'https://310401.selcdn.ru/MIXED/unchained_melody1.mp4',
      '6' : 'https://310401.selcdn.ru/MIXED/unchained_melody3.mp4',
      '8' : 'https://310401.selcdn.ru/MIXED/unchained_melody4.mp4'
    };
    for (var key in playList) {
        vidSlider1.find('.t994__item-wrapper:eq('+(+key-1)+') .t994__content').before('<div class="t994__video-wrapper"><video class="t994__video" style="object-fit: cover;background-size: cover;  width: 100%; height: 100%;"  preload="auto" playsinline=""  loop="" muted="muted"><source src="'+playList[key]+'"></video><div class="t994__video-btn"></div><div class="t994__video-btn-mute"></div><div style="display:none" class="t994__video-mt speaker-btn"></div><div class="t994__video-unmt speaker-btn"></div></div>');
    };
    let videoNum = vidSlider1.find('.t994__video').length;
    function pauseVideo(){
        vidSlider1.find('.t994__video').each(function( index ) {
            let thisVideo = $(this);
            if (  $(this).get(0).played ) $(this)[0].pause(); 
            thisVideo.siblings('.t994__video-btn-mute').removeClass('mute_show');
        });
        vidSlider1.find('.t994__video-btn').removeClass('playbtn_hide');
        setTimeout(function(){
            let findVideo = vidSlider1.find('.t994__item.t-slds__item_active video');
            if ( findVideo.length ){
                findVideo.next('.t994__video-btn').addClass('playbtn_hide');
                findVideo[0].play();
                findVideo.siblings('.t994__video-btn-mute').addClass('mute_show'); 
            };
        }, 100);    
    };
    vidSlider1.find('.t994__item-wrapper').on('click' , '.t994__video-btn-mute' ,function(e){ 
        //vidSlider1.find('.t994__video').prop('muted', false); 
        vidSlider1.find('.t994__video-btn-mute').addClass('mute_dis');
    });
    vidSlider1.find('.t994__content, .t994__video-btn').click(function(){
        let videoLn = $(this).closest('.t994__item-wrapper').find('video');
        if( videoLn.length ){
            if (  videoLn.get(0).paused ) {
                videoLn.next('.t994__video-btn').addClass('playbtn_hide');
                videoLn.get(0).play();
                videoLn.siblings('.t994__video-btn-mute').addClass('mute_show');
            } else {
                videoLn.next('.t994__video-btn').removeClass('playbtn_hide');
                videoLn.get(0).pause();
                videoLn.siblings('.t994__video-btn-mute').removeClass('mute_show'); 
            }
        };
    });
    
    
    
    $(document).on('click' , '.t994__video-unmt' ,function(e){ 
        
        let elem = $(this);
        let vidWrapper = elem.closest('.t994__video-wrapper');
        elem.hide();
        vidWrapper.find('.t994__video-mt').show();
        vidWrapper.find('.t994__video').prop('muted', false); 
    });
    
    $(document).on('click' , '.t994__video-mt' ,function(e){ 
        
        let elem = $(this);
        let vidWrapper = elem.closest('.t994__video-wrapper');
        elem.hide();
        vidWrapper.find('.t994__video-unmt').show();
        vidWrapper.find('.t994__video').prop('muted', true); 
    });
    
    
    
    
    setTimeout(function(){
        let lnVid = vidSlider1.find('.t994__item:first video').length;
        if(lnVid>0) vidSlider1.find('.t994__item:first video')[0].play();
    }, 1000);
    
    let slideline1 = vidSlider1.find('.t994__slidecontainer')[0];
    
    var observer = new MutationObserver(function (mutations) {
        mutations.forEach(function (mutation) {
            var newVal = $(mutation.slideline1).prop(mutation.attributeName);
            if (mutation.attributeName === "data-slide-pos") { pauseVideo()};  
    });
    });
    observer.observe( slideline1 , {  attributes: true});


})();    
    
});
</script>

<style>


.t994__video-btn-mute {
    display: none !important;
}


.speaker-btn{
    opacity: 0;
    pointer-events: none;
}

.t-slds__item_active .speaker-btn{
    opacity: 1;
    pointer-events: auto;
}


.t994__video-mt, .t994__video-unmt {
    width: 40px;
    height: 40px;
    background-image: url(https://static.tildacdn.com/tild3038-3530-4539-a436-633838393239/Group_237878.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    right: 20px;
    bottom: 20px;
    z-index: 99;
    cursor: pointer;
}



.t994__video-unmt {
    background-image: url(https://static.tildacdn.com/tild3435-3661-4437-b737-303935646466/Group_237877.svg);
}


.t994__video-wrapper { 
    width: 100%; 
    height: 100%;
    position:absolute;
}
.t994__video-btn , .t994__video-btn-mute {
    width: 60px;
    height: 60px;
    background-image: url(https://static.tildacdn.com/tild6465-3064-4962-b733-383664376338/Group_8.svg);
    position: absolute;
    left: 50%;
    top: 50%;
    background-size: contain;
    background-repeat: no-repeat;
    transform: translateX(-50%) translateY(-50%);
    cursor: pointer;
    z-index: 99;
    transition: all 0.3s ease-in-out;
}
.t994__video-btn-mute{
    display:none;
    background-image: url(https://static.tildacdn.com/tild3938-6263-4461-b031-363134353565/volume_1.svg);
}
.playbtn_hide{opacity:0}
.t994__video-btn:hover {transform: translateX(-50%) translateY(-50%) scale(1.1)}
.mute_show{display:block}
.mute_dis{display:none !important}

@media screen and (max-width:960px){
.speaker-btn {
    right:50%;
    transform: translateX(50%);
}    
}



</style>