如何在幻灯片更改时暂停 youtube 视频？答案

【问题标题】：How to pause youtube video on slide change?如何在幻灯片更改时暂停 youtube 视频？
【发布时间】：2019-09-16 22:35:31
【问题描述】：

当幻灯片更改使用 swiper from iDangerous 时，我正在尝试暂停 youtube 视频

我的 youtube 视频网址以 enablejsapi=1 结尾，这是一些代码，重要的部分是 slideChange：

var swiper_video = new Swiper('.swiper-video', {

    loop: true,
    autoplay: false,
    pagination: {
      el: '.swiper-pagination',
    },
    navigation: {
      nextEl: '.swiper-button-next.video-swiper',
      prevEl: '.swiper-button-prev.video-swiper',
    },
    slideChange: function (el) {
      console.log('1');
      $('.swiper-slide').each(function () {
        var youtubePlayer = $(this).find('iframe').get(0);
        if (youtubePlayer) {
          youtubePlayer.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
        }
      });
    },
  });

似乎无法让事件触发，但我认为其余代码应该可以工作。

【问题讨论】：

标签： javascript video youtube carousel swiper

【解决方案1】：

您的事件似乎声明不正确，应该在 on:{} 内，类似于：

var swiper_video = new Swiper('.swiper-video', {
  on: {
    slideChange: function () {
      console.log('Hello World') 
    },
  }
});

所以用你的完整代码：

var swiper_video = new Swiper('.swiper-video', {
  loop: true,
  autoplay: false,
  pagination: {
    el: '.swiper-pagination',
  },
  navigation: {
    nextEl: '.swiper-button-next.video-swiper',
    prevEl: '.swiper-button-prev.video-swiper',
  },
  on: {
    slideChange: function (el) {
      console.log('1');
      $('.swiper-slide').each(function () {
        var youtubePlayer = $(this).find('iframe').get(0);
        if (youtubePlayer) {
            youtubePlayer.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
        }
      });
    },
  },
});

查看API docs for events here，或working example here

【讨论】：