光滑轮播自动播放视频slide1

Question

我有一个光滑的旋转木马，在第一张幻灯片中，我正在自动播放视频。滑动开始时，此功能起作用，显示第二张幻灯片，然后回到第一张幻灯片。但是我无法在pageload上使用它，因为我正在使用afterChange。您可以看到我的示例here

触发的JavaScript是：

$('.top-carousel').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 4000,
    dots: true,
    pauseOnHover: false,
    infinite: true,
    arrows: false,
});

  $('.top-carousel').on('afterChange', function(event, slick, currentSlide){
    if ($("#slick-slide00").hasClass("slick-active")) {
      $('.top-carousel').slick('slickPause');
      theVideo.play();
    }
  });

  document.getElementById('theVideo').addEventListener('ended',myHandler,false);

  function myHandler(e) {
    $('.top-carousel').slick('slickPlay');
  } 

请问有人有什么想法吗？