Carousel VideoSlider problem

CosminB

Hello. My name is Cosmin and I am new on this forum and also I am new in Javascript programming, so I need some help please.
I tried to make a video carousel and I used for this Slick plugin. I wrote the code in Html and CSS and I imported the Javascript file from Slick and I manage to make the carousel working. The content of the carousel is video content not picture. So I put some video inside of the carousel.

The problem started when I want to make a custom controls bar for the video. I manage to make the Javascript code for the Play button and it works but...only when the video is in the first position of a carousel.If I slide the carousel to the next position, the play button doesn't work and I don't know why.

Maybe someone can help me please with this problem.
Thank you very much.

Here is the Javascript code:

$(document).ready(function(){
    $('.caruselPost').slick({
     slidesToShow: 3,
     slidesToScroll: 1,
     autoplay: false,
     autoplaySpeed: 2000,
     nextArrow: $('.next'),
     prevArrow: $('.prev'),
     responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 860,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]
    });
});



var video = document.querySelector('.video');
var btn = document.getElementById('play-pause');


function PlayPause() {

  if(video.paused){
      btn.className = 'pause';
      video.play();
  }else{
    btn.className = 'play';
    video.pause();
  }
}

btn.onclick=function(){
  PlayPause();
}

Sempervivum

Hi Cosmin and welcome to the forum!

I manage to make the Javascript code for the Play button and it works but...only when the video is in the first position of a carousel.

This is exactly what document.querySelector does: It gets the first element that matches the selector.
In order to get the slide currently visible you need to use:

slickCurrentSlide Returns the current slide index

However one question pops up:
At breakpoint: 1024 3 slides are visible at the same time. Which video should be addressed by the play/pause button then?

BTW: Please use code tags when posting code: [code]your code here[/code] or triple backticks. I edited your posting accordingly.

CosminB

Hello Sempervivum, thank you very much for your answer. I will use the code tags in the future. I didn't know that, thank you.

The carousel plugin that I choose have 3 slides visible at the same time. The total number of slides is 5 but only 3 are visible on the screen at the same time.
I want all the slides to have a video inside them and a controls bar with a play pause button that will work, because I want to place a video in every slide.
For the begining I made only one video with controls and a play pause button and I notice that when the slide that contain this video is in the first position of a carousel, and visible, the play pause button work. But when it slide in the second position and the third position, the play pause button doesn' work.

I try to understand what are you saying about slickCurrentSlide but I don't know where to use it.
I used document.querySelector because I wanted to select the class that contains the video.mp4 itself.

Thank you

Sempervivum

I made only one video with controls and a play pause button and I notice that when the slide that contain this video is in the first position of a carousel, and visible, the play pause button work. But when it slide in the second position and the third position, the play pause button doesn' work.

OK, apparently I misunderstood what the issue is. I'm gonna set up a test file and check.

Sempervivum

Test file ready, unfortunately it works fine, playing and pausing the video works even when it's out of view. I tested Opera, Chrome, Firefox and Edge. Which browser are you using?

Maybe

your configuration is different from my test setup or
you are using a browser which blocks playing a video when it's not visible.

CosminB

Hello. I use Chrome

Sempervivum

Then I'm helpless. Do you have this online and can post the URL?
On which device and OS is Chrome running?

CosminB

I don't want the video to play when it's not visible. I just want the video to play when it's visible in position 1 and also when it's sliding in position 2 and 3. Like I said, the carousel have 3 position visible and also have an autoplay function. I only manage to play the video when it's in position 1. In position 2 and 3 don't want it to play.

Sempervivum

CosminB Ah, got it, what you are describing is not an issue but the behavior you desire. I'm gonna look into this ...

CosminB

it's not online yet. I have a desktop with windows 10.

CosminB

Maybe you can post your test code. Maybe I will find something that I miss. Thank you.

Sempervivum

... this turned out to be fairly simple as slick slider adds a class "slick-active" to each slide being visible currently.
Try this javascript for the play/pause function:

        function PlayPause() {

            if (video.paused) {
                btn.className = 'pause';
                if (video.classList.contains('slick-active')) {
                    video.play();
                }
            } else {
                btn.className = 'play';
                video.pause();
            }
        }

CosminB

Now, it doesn't work at all. Only the instance of the button has change, from play to pause but the video didn't play.

Sempervivum

I suspect your video resides in a wrapper like this:

    <div class="caruselPost">
        <div>
            <video class="video" src="videos/whymelord-360.mp4" controls></video>
        </div>
        <!-- more slides here -->

If so, the class is added to the wrapper not to the video and you have to extend the code like this:

        // initializing slick slider unchanged
        var video = document.querySelector('.video');
        // get the video's wrapper:
        var videoWrapper = video.closest('div');
        var btn = document.getElementById('play-pause');


        function PlayPause() {

            if (video.paused) {
                btn.className = 'pause';
                // check if the video is visible currently:
                if (videoWrapper.classList.contains('slick-active')) {
                    video.play();
                }
            } else {
                btn.className = 'play';
                video.pause();
            }
        }

        btn.onclick = function () {
            PlayPause();
        }

Sempervivum

My complete test file:

<!DOCTYPE html>
<html>

<head>
    <title>Video in Slick Slider</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css"
        integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"
        integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <style>
        .caruselPost img,
        .caruselPost video {
            width: 100%;
            height: auto;
        }
    </style>
</head>

<body>
    <div class="caruselPost">
        <div>
            <video class="video" src="videos/whymelord-360.mp4" controls></video>
        </div>
        <div>
            <img src="images/bild1.jpg">
        </div>
        <div>
            <img src="images/bild2.jpg">
        </div>
        <div>
            <img src="images/bild3.jpg">
        </div>
        <div>
            <img src="images/bild4.jpg">
        </div>
    </div>
    <button id="play-pause">Play/Pause</button>
    <button class="prev">Previous</button>
    <button class="next">Next</button>
    <script type="text/javascript">
        $(document).ready(function () {
            const slick = $('.caruselPost').slick({
                slidesToShow: 3,
                slidesToScroll: 1,
                autoplay: false,
                autoplaySpeed: 2000,
                nextArrow: $('.next'),
                prevArrow: $('.prev'),
                responsive: [
                    {
                        breakpoint: 1024,
                        settings: {
                            slidesToShow: 3,
                            slidesToScroll: 3,
                            infinite: true,
                            dots: true
                        }
                    },
                    {
                        breakpoint: 860,
                        settings: {
                            slidesToShow: 2,
                            slidesToScroll: 2
                        }
                    },
                    {
                        breakpoint: 480,
                        settings: {
                            slidesToShow: 1,
                            slidesToScroll: 1
                        }
                    }
                    // You can unslick at a given breakpoint now by adding:
                    // settings: "unslick"
                    // instead of a settings object
                ]
            });
            // callback for "after change"
            // pause video if it's not in view:
            slick.on('afterChange', function (slick, currentSlide) {
                if (!videoWrapper.classList.contains('slick-active')) {
                    video.pause();
                    btn.className = 'play';
                }

            });
        });


        var video = document.querySelector('.video');
        // get the video's wrapper:
        var videoWrapper = video.closest('div');
        var btn = document.getElementById('play-pause');


        function PlayPause() {

            if (video.paused) {
                btn.className = 'pause';
                // check if the video is visible currently:
                if (videoWrapper.classList.contains('slick-active')) {
                    video.play();
                }
            } else {
                btn.className = 'play';
                video.pause();
            }
        }

        btn.onclick = function () {
            PlayPause();
        }
    </script>

</body>

</html>

You may notice that I added another feature: When the video slides out of view, the video is paused.

CosminB

It look like this.
If you want I can send you the the folder with the Html, Css and Javascript file for this carousel.

<div class="caruselPost">
  		    <div class="post">
  		         	<div class="c-video">
	   	                       <video class="video"  src="Video.mp4" ></video>
	   	                       <div class="controls">
	   	   	                         <div class="playBtn">
	   	   	  	                         <button id="play-pause"></button>
	   	   	                         </div>
	   	                       </div>
	   	                </div>
	             </div>
	   	   	               

	    <!-- more slides here -->

Sempervivum

I see. In order to address the correct wrapper you have to add it's class to the selector:
var videoWrapper = video.closest('div.post');
If you can't get it working then send the files, e. g. in a zip file.

CosminB

I will test your code. Thank you.

CosminB

Hello. I tested the code but somehow it didn't work. It didn't play in any position.
Anyhow, I want to put my folder with the files here, but I don't see any option to add files.
I made the zip arhive.

Sempervivum

Do you have webspace already? If so, upload it there.
Alternatively you might create a fiddle on jsfiddle.net.