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

Posted 2021-05-05

在我的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);

如下图所示，这在笔记本电脑/台式机上运行得非常好。

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

1. 缺少图像中心的视频图标。
2. 用户必须单击两次才能播放视频。单击时，首先加载实际的YouTube视频，然后用户必须再次单击才能播放视频。

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

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

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

湾在控制台中，跟随错误（TypeError: img is undefined）显示移动设备。

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

如何采取下一步解决方案？任何提示/指导非常感谢。提前致谢。

更新：

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

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

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

答案

根据你所展示的内容，它在我看来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，那可能是罪魁祸首。您可以从那里向后向上移动，以更精确地进一步精确定位...