javascript - 第二次单击浅灰色弹出窗口时，Azure Media Player 不播放视频

Question

我为产品画廊设置了一个播放器，其中包括图像和视频。我正在使用天蓝色媒体播放器，其在代码中使用如下:

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

单击视频缩略图时，会弹出灯光画廊，第一次单击时视频会成功播放背景。但是，当我关闭弹出窗口并再次单击缩略图时，弹出窗口重新出现，但视频无法播放，并且无法生成 azure 媒体播放器所需的 HTML 标签。那么它只包含视频标签。看起来视频播放器只播放了一次...

如何让视频在每次点击时播放？我已经用 onAfterOpen.lg 附加了事件，如给出的示例 here但似乎根本不起作用。

我查看了 lightgallery API 文档并使用了一些自定义事件，例如 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

我从当前 DOM 中删除了 amp.Player。我从here找到了dispose()方法并在 lightgallery 的 onBeforeClose.lg 自定义事件中调用它

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