javascript - How to pause youtube video on slide change? - Stack Overflow

admin管理员组

文章数量:1400844

I am trying to pause a youtube video when a slide changes using swiper from iDangerous

I have the youtube video urls ending with enablejsapi=1 and here is some code, the important part being 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":"mand","func":"pauseVideo","args":""}', '*');
        }
      });
    },
  });

Can't seem to get the event to even fire, but I think the rest of the code should work.

I am trying to pause a youtube video when a slide changes using swiper from iDangerous

I have the youtube video urls ending with enablejsapi=1 and here is some code, the important part being 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":"mand","func":"pauseVideo","args":""}', '*');
        }
      });
    },
  });

Can't seem to get the event to even fire, but I think the rest of the code should work.

• javascript
• video
• youtube
• carousel
• swiper.js

Share Improve this question Follow asked Sep 16, 2019 at 22:35 AdamAdam 5722 silver badges1010 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

Your event looks like it is declared incorrectly, should be inside on:{}, something like:

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

So with your full code:

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":"mand","func":"pauseVideo","args":""}', '*');
        }
      });
    },
  },
});

Check out the API docs for events here, or a working example here

本文标签： javascriptHow to pause youtube video on slide changeStack Overflow