Остановить воспроизведение видео YouTube, когда слайдер FlexSlider не виден - PullRequest
Новая
       17

Остановить воспроизведение видео YouTube, когда слайдер FlexSlider не виден

0 голосов
/ 22 февраля 2019

Я пытаюсь поместить некоторые встроенные видео YouTube в карусель / слайдер FlexSlider.Проблема, которую я имею, состоит в том, чтобы остановить видео, если слайд не виден.В настоящее время, если вы воспроизводите видео и выбираете новое видео, воспроизводится предыдущее.

Ожидается: при смене слайдов остановите видео.Фактически: при смене слайдов видео продолжает воспроизводиться.

HTML: 

<section class="videolist">
  <div class="container">
    <div id="slider" class="flexslider">
      <ul class="slides">
        <li>
          <iframe width="560" height="315" src="https://www.youtube.com/embed/xcJtL7QggTI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </li>
        <li><iframe width="560" height="315" src="https://www.youtube.com/embed/a3ICNMQW7Ok" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </li>
        <li> <iframe width="560" height="315" src="https://www.youtube.com/embed/S-thTTqefls" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </li>
        <li> <iframe width="560" height="315" src="https://www.youtube.com/embed/Bey4XXJAqS8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </li>

      </ul>
    </div>
    <div id="carousel" class="flexslider">
      <ul class="slides">
        <li> <img src="https://quidsup.net/wallpaper/abstract/the-cube-1920x1080-wallpaper-5189.jpg" alt="This is the alt text of the video"> </li>
        <li> <img src="https://www.setaswall.com/wp-content/uploads/2017/08/Spaceship-Background-20-1920x1080.jpg" alt="This is the alt text of the video"> </li>
        <li> <img src="https://wallpapercave.com/wp/trlzN6b.jpg" alt="This is the alt text of the video"> </li>
        <li> <img src="https://i.redd.it/vjcavsc1lcs11.jpg" alt="This is the alt text of the video"> </li>

      </ul>
    </div>
  </div>
</section>

JS: 

$(window).load(function() {  
  $('#carousel').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    itemWidth: 210,
    itemMargin: 5,
    asNavFor: '#slider'
  }); 
  $('#slider').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    sync: "#carousel"
  });
});

У меня здесь есть кодекс YouTube FlexSlider Carousel |Codepen

Есть идеи, как этого добиться?

Спасибо

1 Ответ

0 голосов
/ 22 февраля 2019

С помощью разобрался, добавив несколько js. 

$(window).load(function() {  
  $('#carousel').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    itemWidth: 210,
    itemMargin: 5,
    asNavFor: '#slider',
    start: function() {
      $('#carousel li').on('click', function(e){
        stopVideos();
      });
      $('#carousel li').on('click', function(e){
        stopVideos();
      });
    }
  }); 
  $('#slider').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    sync: "#carousel",
    start: function() {
      $('.flex-next').on('click', function(e){
        stopVideos();
      });
      $('.flex-prev').on('click', function(e){
        stopVideos();
      });
    }
  });
});

function stopVideos() {
  $('.iframe-vid').each(function() {
  this.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*')
  });
}
...