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

在单击视频缩略图时，它会弹出图库，并且视频在第一次单击时会成功播放背景。但是，当我关闭弹出窗口并再次单击缩略图时，弹出窗口会再次出现，但是视频无法播放，并且无法为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();
});

Azure Media Player在浅灰色弹出窗口上的第二次单击时未播放视频

1 个答案: