Azure Media Player не воспроизводит видео при втором нажатии на всплывающем окне

Question

Я настроил плеер для галерей товаров, которые включают в себя как изображения, так и видео. Я использую Azure Media Player, который используется в коде, как показано ниже:

//azure media player settings for video
var myOptions = {
     "nativeControlsForTouch": false,
     controls: true,
     autoplay: true,
     width: "640",
     height: "400"
}

//player for lightgallery popup
var galleryVideoPlayer = document.getElementById("videoA");
    if (galleryVideoPlayer) {
      alert('PLAYING NOW!');
      var myPlayer = amp('videoA', { myOptions },
          function () {
              this.play();
          });
     }

При нажатии на миниатюру видео появляется всплывающая световая галерея с видео, успешно воспроизводящим фон при первом клике. Но когда я закрыл всплывающее окно и снова щелкнул по миниатюре, всплывающее окно снова появляется, но видео не воспроизводится и не может сгенерировать необходимые теги HTML для Azure Media Player. Тогда он содержит только видео тег. Похоже, видео проигрыватель воспроизводится только один раз...

Как сделать так, чтобы видео проигрывалось при каждом нажатии? Я уже прикрепил событие к onAfterOpen.lg, как пример, приведенный здесь, но, похоже, он не работает вообще.

Я проверил документацию по API lightgallery и использовал некоторые пользовательские события, такие как onAfterOpen.lg и т. Д.

lg.on('onAfterOpen.lg', function (event, index) {
      console.log('onAfterOpen');
      //azure media player settings for video
      var myOptions = {
         "nativeControlsForTouch": false,
         controls: true,
         autoplay: true,
         width: "640",
         height: "400"
      }
      //player for lightgallery popup
      var galleryVideoPlayer = document.getElementById("videoA");

      if (galleryVideoPlayer) {
         alert('PLAYING NOW!');
         event.preventDefault();
         var myPlayer = amp('videoA', { myOptions },
         function () {
            this.play();
            });

      }
});

Я ожидал показывать видео каждый раз, когда нажимал на миниатюру. Но это работает только с первого клика. Когда я нажимаю, и всплывающее окно открывается во второй раз, видео не воспроизводится.

Answer 1

Я удалил amp.Player из текущего DOM. Отсюда я нашел метод dispose () и вызвал его внутри пользовательского события lightgallery onBeforeClose.lg

lg.on('onBeforeClose.lg', function (event, index) {
    var myPlayer = amp('videoA');
    myPlayer.dispose();
});