Owl轮播2动态添加视频

Question

我正在尝试将 Owl 轮播视频动态添加到我的网站，但我运行遇到了问题；视频出现在页面上，但当我尝试播放它们时，控制台显示

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

我尝试按照 Owl Carousel 文档 http://www.owlgraphic.com/owlcarousel/demos/manipulations.html 和 Whosebug 上的一些帖子中的说明进行操作，但无法解决这个问题。关于如何在 Owl 轮播中动态添加视频的文档很少（如果有的话）。

我当前的代码如下：

<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 轮播视频。对此非常感谢！

Answer 1

我使用不同的方法让它工作；动态添加视频作为 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);

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

Owl轮播2动态添加视频

Owl Carousel 2 dynamically add videos

jquery

dynamic

owl-carousel-2