Question

我正在尝试动态添加Owl Carousel视频到我的网站，但我遇到了问题;视频会显示在页面上，但当我尝试播放时，控制台会显示

TypeError: video is undefined
    width = video.width || '100%'

我尝试按照Owl Carousel文档http://www.owlgraphic.com/owlcarousel/demos/manipulations.html上的说明和StackOverFlow上的一些帖子，但无法弄清楚这一点。关于如何在Owl Carousel中动态添加视频的文档（如果有的话）并不多。

我目前的代码如下：

<script>
//init carousel
var owl = $('.owl-carousel');
$(document).ready(function(){
  owl.owlCarousel({
    touchDrag: true,
    startPosition: 1,
    merge:true,
    margin:10,
    video:true,
    center:true,
    responsive:{
      320:{
        items:1
      },
      900:{
        items:3
      }
    }
  });

  var html =  `<div data-merge="1" class="item-video">
                <div class="owl-video-wrapper">
                  <a class="owl-video" href="https://www.youtube.com/watch?v=dOWFVKb2JqM" style="display: none;"></a>
                  <div class="owl-video-play-icon"></div>
                  <div class="owl-video-tn" style="opacity:1;background-image:url(http://img.youtube.com/vi/dOWFVKb2JqM/hqdefault.jpg)"></div>
                </div>
              </div>`;
  var content = '<div class="owl-item" data-video="https://www.youtube.com/watch?v=dOWFVKb2JqM">'+html+'</div>';
  owl.trigger('add.owl.carousel', [$(content), 0]).trigger('refresh.owl.carousel');
});
</script>

我也试着像这样添加它们：

var content = `<div class="item-video" data-merge="1"><a class="owl-video" href="https://www.youtube.com/watch?v=JpxsRwnRwCQ"></a></div>`;
owl.trigger('add.owl.carousel', [$(content), 0]).trigger('refresh.owl.carousel');

我的想法是稍后从Ghost CMS API获取视频网址，并使用此数据启动Owl Carousel视频。对此表示高度赞赏！

Answer 1

我通过使用不同的方法使它工作;动态添加视频作为iframe嵌入。

这就是我现在所拥有的，一切正常。 lazyYT是懒惰加载youtube-videos的jQuery插件。 https://github.com/tylerpearson/lazyYT

var content = `<div data-merge="1" class="item-video"> <div class="lazyYT" data-youtube-id="`+parsedUrl+`" data-ratio="16:9"></div></div>` // Add video to carousel owl.trigger('add.owl.carousel', [$(content), 0]).trigger('refresh.owl.carousel').trigger('to.owl.carousel', 1);

只是想让你知道，也许它对某人有用。：）

Owl Carousel 2动态添加视频

1 个答案: