Обнаружение конца видео YouTube в Magnific Popup

Question

Как можно обнаружить конец видеоролика YouTube, воспроизводимого в полномасштабном всплывающем окне? Единственные предусмотренные события - это открытие и закрытие всплывающего окна. Может ли iframe или js api из YouTube использоваться каким-то образом для достижения этого, используя onPlayerStateChange === 0?

Мне нужно вызвать javascript для отображения кнопки продолжения на конце видео, чтобы пользователь мог продолжить следующий сегмент.

Answer 1

http://jsfiddle.net/sjvc_phil/s7432z8L/

1. Убедитесь, что вы включили YouTube IFrame API

   <script src="//www.youtube.com/iframe_api"></script> 
   

2. Вам нужно изменить код Magnific Popup IFrame немного. В качестве отметки необходимо указать id="player" рядом с class="mfp-iframe". Это позволяет API YouTube знать, какое видео вы хотите отслеживать. Вам также понадобится параметр &enablejsapi=1 в URL-адресе youtube после параметра ?autoplay=1.

3. Магия находится в увеличенном всплытии callback.

   callbacks: { 
       open: function() { 
       new YT.Player('player', { 
        events: { 
        'onStateChange': onPlayerStateChange 
        } 
       }); 
       } 
   } 
   

   И функция, которая закрывает Magnific Popup, когда видео заканчивается:

   function onPlayerStateChange(event) { 
       if (event.data == YT.PlayerState.ENDED) { 
        $.magnificPopup.close(); 
       } 
   } 
   

Answer 2

Выработать на большом растворе выше. Вы можете включить идентификатор «player», а также enablejsapi, расширив опцию разметки iframe без изменения кода ядра с помощью magnificPopup

$('#play').magnificPopup({ 
    type:'iframe', 
    iframe: { 
     markup: '<div class="mfp-iframe-scaler">'+ 
     '<div class="mfp-close"></div>'+ 
     '<iframe id="player" class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+ 
     '</div>', // HTML markup of popup, `mfp-close` will be replaced by the close button 
     patterns: { 
      youtube: { 
       index: 'youtube.com/', 
       id: 'v=', 
       src: '//www.youtube.com/embed/%id%?rel=0&autoplay=1&enablejsapi=1' 
      } 
     }, 
     srcAction: 'iframe_src', 
    }, 
    callbacks: { 
     open: function() { 
     new YT.Player('player', { 
      events: { 
      'onStateChange': onPlayerStateChange 
      } 
     }); 
     } 
    }, 
    midClick: true, 
    closeOnBgClick: false, 
    removalDelay: 500, 
    mainClass: 'mfp-fade mfp-video', 
});