javascript - Azure 媒体播放器在第二次单击浅灰色弹出窗口时不播放视频

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 媒体播放器生成所需的 HTML 标签。它只包含视频标签。看起来视频播放器只播放了一次......

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

我查看了 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();
            });

      }
});

我希望每次单击缩略图时都会显示视频。但它只适用于第一次点击。当我单击并第二次打开弹出窗口时，视频不播放。

标签： javascriptjqueryasp.netazure-media-services

Answer 1

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

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