貓頭鷹旋轉木馬2動態添加視頻

我想動態地添加貓頭鷹旋轉木馬視頻到我的網站，但我遇到了一個問題;影片顯示在頁面上，但是當我試圖發揮他們的控制檯說貓頭鷹旋轉木馬2動態添加視頻

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

我試着遵循貓頭鷹旋轉木馬文件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');

我的想法是後來來從鬼CMS API的視頻網址，並啓動貓頭鷹旋轉木馬這些數據的視頻。幫助，高度讚賞！

來源

2016-07-27 mpak

我通過使用不同的方法得到了它的工作;動態地將視頻添加爲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-02 07:44:41 mpak

貓頭鷹旋轉木馬2動態添加視頻

回答

相關問題