第二次单击 lightgray 弹出窗口时，Azure Media Player 不播放视频

Question

我为包含图像和视频的产品库设置了一个播放器。我正在使用如下代码中使用的 azure 媒体播放器：

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

当点击视频缩略图时，它会弹出 lightgallery，视频在第一次点击时成功播放背景。但是当我关闭弹出窗口并再次单击缩略图时，弹出窗口重新出现但视频不播放并且它无法为 azure media player 生成所需的 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 and called it inside onBeforeClose.lg custom event of lightgallery

中找到了 dispose() 方法

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

第二次单击 lightgray 弹出窗口时，Azure Media Player 不播放视频

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

javascript

asp.net

jquery

azure-media-services