Galleria 视频未在移动设备中显示视频图标答案

【问题标题】：Galleria video not showing video icon in mobileGalleria 视频未在移动设备中显示视频图标
【发布时间】：2018-06-28 06:23:25
【问题描述】：

在我的 drupal 商务网站中，我们使用 Galleria 来展示产品幻灯片。根据最近的要求，我们需要将 (youtube) 视频添加为幻灯片中的第二项。我通过使用splice function 实现了这一点，正如提到的here：

(function($){
  Galleria.ready(function(options) {  

    var gallery = this;
    gallery.splice(1, 0, { video: 'https://www.youtube.com/watch?v=1wNzzCWWEdg' });
      });

})(jQuery);

如下所示，这在笔记本电脑/台式机中运行良好。

在手机中，视频被正确添加到第二位，但它有两个问题。

图片中心的视频图标不见了。
用户必须点击两次才能播放视频。单击时，首先它加载实际的 youtube 视频，然后用户必须再次点击播放视频。

到目前为止我已经检查过什么来解决这个问题：

一个。通过“Inspect Element”，我发现有这个元素被附加在桌面的 DOM 中而不是移动的 DOM 中。

<div class="galleria-videoicon">
  <i></i>
</div>

b.在控制台中，移动设备显示以下错误(TypeError: img is undefined)。

我尝试查看第 3069 行的 galleria.js 文件，如错误所示。我在这里想不通。

我该如何采取下一步措施来解决它？非常感谢任何提示/指导。提前致谢。

更新：

我还尝试将视频图标明确添加到移动设备的图库元素中。

   //For Mobile Devices
    Galleria.on('image', function(e) {
          $(e.imageTarget).after("DOM_FOR_ICON");            
    });

但这（或任何其他 JS 代码）不适用于 Gallery 上的前两个元素。它仅适用于第三个和更多元素。

【问题讨论】：

标签： javascript jquery drupal responsive galleria

【解决方案1】：

根据您展示的内容，在我看来，3062 行上的代码正在对undefined 进行静默失败

在线3064，尝试添加这些行：

console.log(img);
console.log(self);
console.log(self._controls);
console.log(self._controls.slides);
console.log(self._controls.slides[loadme])

或者，如果您的编辑器/IDE 上有调试器，最好在 3064 行添加调试断点

这在控制台中为您提供了什么？如果你在这里得到任何undefined 的东西，那可能是罪魁祸首。您可以从那里向后向上堆栈，以更精确地进一步定位它......

【讨论】：