Azure Media Player is not playing video on second click on lightgray popup

Question

I set up a player for product galleries which include both images and video. I am using azure media player which is being used in the code as below:

//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();
          });
     }

While clicking on the video thumbnail it pops up the lightgallery with video playing the background successfully on first click. But when I closed the popup and click on the thumbnail again, the popup re-appears but the video doesn't play and it cannot generate the required HTML tags for azure media player. It contains only video tag then. Looks like the video player being played one time only...

How can I make the videos play on every click? I already attached the event with onAfterOpen.lg like example given here but it seems not working at all.

I checked from the lightgallery API documentation and used some of the custom events like onAfterOpen.lg etc.

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();
            });

      }
});

I expected to show the video on each time clicking on the thumbnail. But it does work only with the first click. When I click and the popup opens for the second time, video doesn't play.

Answer 1

I removed the amp.Player from the current DOM. I found the dispose() method from here and called it inside onBeforeClose.lg custom event of lightgallery

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