0

我正在尝试将 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 获取视频 URL，并使用这些数据启动 Owl Carousel 视频。对此高度赞赏！

4

1 回答 1

0

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

这就是我现在得到的，一切正常。lazyYT 是用于延迟加载 youtube 视频的 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);

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

于 2016-08-02T07:44:41.943 回答