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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Galleria视频未在移动设备中显示视频图标相关的知识,希望对你有一定的参考价值。

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

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

enter image description here

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

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

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

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

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

湾在控制台中,跟随错误(TypeError: img is undefined)显示移动设备。

enter image description here

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

enter image description here

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

更新:

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

   //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,那可能是罪魁祸首。您可以从那里向后向上移动,以更精确地进一步精确定位...

以上是关于Galleria视频未在移动设备中显示视频图标的主要内容,如果未能解决你的问题,请参考以下文章

某些图标未在某些 android 设备中显示

视频未在 Webview android (Google TV) 内播放

使用视频标签html5时如何在移动设备上显示视频缩略图

混合应用推送通知图标未在 Android 8 (Oreo) 上显示

Youtube 视频未在 RecyclerView 中显示

导航栏引导菜单未在移动设备中显示