How to prevent from 2 videos to work on the same time after user scrolled

Question

I'm setting up a slick slider and for now the option to click to the next slider (simply by pressing on the next video) will play the next video. The question is how can I stop the video (in case that the user didn't finish to watch the previous one) when the user is already on the new video.

I thought maybe it has to do something with wistia.com api, it might help for this problem. (I'm hosting my videos there).

My html:

            <div class="container-fluid">
                <div class="col-12 mx-auto text-center">
                    <div class="center slider">
                        <div>
                            <div class="video">
                                <script src="https://fast.wistia.com/embed/medias/hmtobx4al7.jsonp" async></script>
                                <script src="https://fast.wistia.com/assets/external/E-v1.js" async></script>
                                <div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;">
                                    <div class="wistia_responsive_wrapper"
                                        style="height:100%;left:0;position:absolute;top:0;width:100%;">
                                        <div class="wistia_embed wistia_async_hmtobx4al7 videoFoam=true"
                                            style="height:100%;position:relative;width:100%">
                                            <div class="wistia_swatch"
                                                style="height:100%;left:0;opacity:0;overflow:hidden;position:absolute;top:0;transition:opacity 200ms;width:100%;">
                                                <img src="https://fast.wistia.com/embed/medias/hmtobx4al7/swatch"
                                                    style="filter:blur(5px);height:100%;object-fit:contain;width:100%;"
                                                    alt="" onload="this.parentNode.style.opacity=1;" /></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <br>
                            <span class="mentor-name">Anthony Morrison</span> <br>
                            <span class="mentor-quote">“Igor has done a phenomenal job as a JV partner. He has a higher
                                conversion rate than any JV that promoted our webinar.”</span>
                        </div>

                        <div>
                            <div class="video">
                                <script src="https://fast.wistia.com/embed/medias/55ilr5u699.jsonp" async></script>
                                <script src="https://fast.wistia.com/assets/external/E-v1.js" async></script>
                                <div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;">
                                    <div class="wistia_responsive_wrapper"
                                        style="height:100%;left:0;position:absolute;top:0;width:100%;">
                                        <div class="wistia_embed wistia_async_55ilr5u699 videoFoam=true"
                                            style="height:100%;position:relative;width:100%">
                                            <div class="wistia_swatch"
                                                style="height:100%;left:0;opacity:0;overflow:hidden;position:absolute;top:0;transition:opacity 200ms;width:100%;">
                                                <img src="https://fast.wistia.com/embed/medias/55ilr5u699/swatch"
                                                    style="filter:blur(5px);height:100%;object-fit:contain;width:100%;"
                                                    alt="" onload="this.parentNode.style.opacity=1;" /></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <br>
                            <span class="mentor-name">michael cheney</span> <br>
                            <span class="mentor-quote">“Igor's a super big player. He doesn't make a big song and dance
                                about it, but trust me, if you want big numbers - talk to Igor!”</span>
                        </div>
                        <div>
                            <div class="video">
                                <script src="https://fast.wistia.com/embed/medias/r1ru4nt171.jsonp" async></script>
                                <script src="https://fast.wistia.com/assets/external/E-v1.js" async></script>
                                <div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;">
                                    <div class="wistia_responsive_wrapper"
                                        style="height:100%;left:0;position:absolute;top:0;width:100%;">
                                        <div class="wistia_embed wistia_async_r1ru4nt171 videoFoam=true"
                                            style="height:100%;position:relative;width:100%">
                                            <div class="wistia_swatch"
                                                style="height:100%;left:0;opacity:0;overflow:hidden;position:absolute;top:0;transition:opacity 200ms;width:100%;">
                                                <img src="https://fast.wistia.com/embed/medias/r1ru4nt171/swatch"
                                                    style="filter:blur(5px);height:100%;object-fit:contain;width:100%;"
                                                    alt="" onload="this.parentNode.style.opacity=1;" /></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <br>
                            <span class="mentor-name">Ron Douglas</span> <br>
                            <span class="mentor-quote">“Cease every opportunity to work with Igor. He's one of the top
                                guys in list building.”</span>
                        </div>

                        <div>
                            <div class="video">
                                <script src="https://fast.wistia.com/embed/medias/n1u4w38ibb.jsonp" async></script>
                                <script src="https://fast.wistia.com/assets/external/E-v1.js" async></script>
                                <div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;">
                                    <div class="wistia_responsive_wrapper"
                                        style="height:100%;left:0;position:absolute;top:0;width:100%;">
                                        <div class="wistia_embed wistia_async_n1u4w38ibb videoFoam=true"
                                            style="height:100%;position:relative;width:100%">
                                            <div class="wistia_swatch"
                                                style="height:100%;left:0;opacity:0;overflow:hidden;position:absolute;top:0;transition:opacity 200ms;width:100%;">
                                                <img src="https://fast.wistia.com/embed/medias/n1u4w38ibb/swatch"
                                                    style="filter:blur(5px);height:100%;object-fit:contain;width:100%;"
                                                    alt="" onload="this.parentNode.style.opacity=1;" /></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <br>
                            <span class="mentor-name">John Crestani</span> <br>
                            <span class="mentor-quote">“If you are not working with Igor Kheifets, you are seriously
                                missing out.”</span>
                        </div>

                        <div>
                            <div class="video">
                                <script src="https://fast.wistia.com/embed/medias/dkbrixea1u.jsonp" async></script>
                                <script src="https://fast.wistia.com/assets/external/E-v1.js" async></script>
                                <div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;">
                                    <div class="wistia_responsive_wrapper"
                                        style="height:100%;left:0;position:absolute;top:0;width:100%;">
                                        <div class="wistia_embed wistia_async_dkbrixea1u videoFoam=true"
                                            style="height:100%;position:relative;width:100%">
                                            <div class="wistia_swatch"
                                                style="height:100%;left:0;opacity:0;overflow:hidden;position:absolute;top:0;transition:opacity 200ms;width:100%;">
                                                <img src="https://fast.wistia.com/embed/medias/dkbrixea1u/swatch"
                                                    style="filter:blur(5px);height:100%;object-fit:contain;width:100%;"
                                                    alt="" onload="this.parentNode.style.opacity=1;" /></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <br>
                            <span class="mentor-name">Matt Bacak</span> <br>
                            <span class="mentor-quote">“Igor has quickly risen to become one of the greatest list
                                builders I've ever met.”</span>
                        </div>

                        <div>
                            <div class="video">
                                <script src="https://fast.wistia.com/embed/medias/i2cnznqtvz.jsonp" async></script>
                                <script src="https://fast.wistia.com/assets/external/E-v1.js" async></script>
                                <div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;">
                                    <div class="wistia_responsive_wrapper"
                                        style="height:100%;left:0;position:absolute;top:0;width:100%;">
                                        <div class="wistia_embed wistia_async_i2cnznqtvz videoFoam=true"
                                            style="height:100%;position:relative;width:100%">
                                            <div class="wistia_swatch"
                                                style="height:100%;left:0;opacity:0;overflow:hidden;position:absolute;top:0;transition:opacity 200ms;width:100%;">
                                                <img src="https://fast.wistia.com/embed/medias/i2cnznqtvz/swatch"
                                                    style="filter:blur(5px);height:100%;object-fit:contain;width:100%;"
                                                    alt="" onload="this.parentNode.style.opacity=1;" /></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <br>
                            <span class="mentor-name">Dean Holland</span> <br>
                            <span class="mentor-quote">“I recommend all my clients and customers to work with Igor. Igor
                                goes above and beyond for his customers.”</span>
                        </div>
                    </div>
                </div>
            </div>

My slick settings:

        //    Testimonial Slider
        $('.slider').slick({
            infinite: true,
            centerMode: true,
            centerPadding: '12%',
            slidesToShow: 3,
            slidesToScroll: 1,
            arrows: false,
            speed: 500,
            autoplay: true,
            autoplaySpeed: 8000,
            focusOnSelect: true,
            waitForAnimate: true,
            responsive: [{
                breakpoint: 992,
                settings: {
                    slidesToShow: 1
                }

            }]
        });

        $('.slider').click(function () {
            $(".slider").slick('slickNext').focus();
            $(".video").trigger('focus')
        });

        $('.video').click(function () {
            $(".video").trigger('focus')
        });

Answer 1

Recently I had to deal with the same issue. A Slick slider with video elements, which should start after slide change and stop before slide change.

First of all some Basics, you can't autoplay video with sound without user interaction in the most modern browsers. Even the javascript .play() method won't work if the Video has sound.

To achieve that your video will play on slide change they must be muted. There are some Solutions and workarounds out for this issue.

Rather than using an .on(click) handler you should listen to the slick events before and after change. To add the video controlling and let slick handle the events

$( document ).ready(function() {
  VideoController.init();

  var $slider = $('.slider');
  $slider.on("beforeChange", function (
    event,
    slick,
    currentSlide,
    nextSlide
  ) {
    var $currentSlide = $(slick.$slides[currentSlide]);

    VideoController.stopVideo($currentSlide);
  });

  $slider.on("afterChange", function (event, slick, currentSlide) {
    var $currentSlide = $(slick.$slides[currentSlide]);

    VideoController.playVideo($currentSlide);
  });
});

After that you need to get your video controller to do the rest of the work. Wistia supplies a JS Library you may use it, but i cant provided how to do that.

The solution I can provide works without an extra controller an uses post messages to control the video elements.

    var VideoController = (function () {

      function init() {
      }

    // POST commands to YouTube or Vimeo API
      function postMessageToPlayer(player, command) {
        console.log('postMessageToPlayer');

        if (player == null || command == null) return;
        player.contentWindow.postMessage(JSON.stringify(command), "*");
    }

    function playVideo($ancestor) {

      console.log('playVideo');
      var player, video;

      if ($ancestor.find('iframe').length) {
        console.log('found Video');
        player = $ancestor.find('iframe').get(0);

        if ($('html').hasClass('is-muted')) {
          postMessageToPlayer(player, {
            "event": "command",
            "func": "mute"
          });
        } else {
          postMessageToPlayer(player, {
            "event": "command",
            "func": "unMute"
        });
      }
      postMessageToPlayer(player, {
        "event": "command",
        "func": "playVideo"
      });
      } else if ($ancestor.find('video').length) {
        video = $ancestor.find("video").get(0);
        video.play();
      } else {
      console.log('no Video');
      }
    }

    // Stops video and will play from start on resume
      function stopVideo($ancestor) {

        console.log('stopVideo');
        var player, video;

        if ($ancestor.find("iframe").length) {
          player = $ancestor.find("iframe").get(0);
          postMessageToPlayer(player, {
           "event": "command",
           "func": "stopVideo"
          });
        } else if ($ancestor.find("video").length) {
          video = $ancestor.find("video").get(0);
          video.pause();
    // Check if the Video is loade, ohterwise it will break your js espacially in ie11
        if (video.readyState === 4) { 
          video.currentTime = 0;
        }
      }
    }

    // pauses video to resume
      function pauseVideo($ancestor) {

       console.log('pauseVideo');
       var player, video;

       if ($ancestor.find("iframe").length) {
         player = $ancestor.find("iframe").get(0);
         postMessageToPlayer(player, {
           "event": "command",
           "func": "pauseVideo"
          });
        } else if ($ancestor.find("video").length) {
          video = $ancestor.find("video").get(0);
          video.pause();
        }
      }
      return {
        init: init,
        postMessageToPlayer: postMessageToPlayer,
        playVideo: playVideo,
        stopVideo: stopVideo,
        pauseVideo: pauseVideo
      }
    })();

Every slide is searched for the video element and according to its type the playback can be controlled. This video controller sent a message to the iframe in order to start the playback of an embedded player or the .play() JS method for html video.

You need to check if the post method works with your wistia. I found something about this in their documentation using the the post json method, but i didn't find a play or the stop command. Not sure if this command where the correct ones.

If it doesn't you have to use the wistia api.js to controll your video playback and replace the code within the methods of the video controller.

All credits go to https://codepen.io/digistate/pen/MvapbE Unfortunately i don't have the original link to the stack post anymore

Answer 2

I eventually figured it out myself I used the wistia API website, it is recommended to everyone to go through it if you want to get your results.

Thank you Mr Florian de Ville for the support even though I didn't have to use your code eventually.

So my code is:

        window._wq = window._wq || [];
        _wq.push({
            id: "_all",
            onReady: function (video) {
                video.bind("play", function () {
                    $('.slider').slick('slickPause');
                    var allVideos = Wistia.api.all();
                    for (var i = 0; i < allVideos.length; i++) {
                        if (allVideos[i].hashedId() !== video.hashedId()) {
                            allVideos[i].pause();
                        }
                    }
                });

                video.bind("pause", function () {
                    $('.slider').slick('slickPlay');
                });

            }
        });

What does it do?: prevents from all the videos on the website to play on the same time, whenever a user presses on "play" [on the video player] the slider will stop from moving and whenever a user is pressing on "pause" the slider will continue to run.