添加视频到AngularJs图像滑块（ui.bootstrap.carousel）

Question

我正在开发使用AngularJS的web应用程序，我有一个要求，应该有一个图像滑块，其中包含图像和视频。

根据UI Boostrap site中给出的示例，我创建了一个图像滑块，现在它完美地工作，现在我想将YouTube视频添加到滑块（新视频幻灯片）。

任何机构都可以对此提出线索...

HTML代码。

<div ng-controller="homeController"> 
<div style="height: 305px"> 
<div uibcarousel active="active" interval="myInterval nowrap="noWrapSlides"> 
    <div uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id" > 
     <img ng-src=" {{slide.image}}" style="margin: auto;" > 
     <div class="carousel-caption"> 
      <h1>Slide {{slide.MainText}}</h1> 
      <p>{{slide.SubText}}</p> 
     </div> 
    </div> 
</div> 

Angularjs代码。

function loagImages(){ 
slides.push({ 
    image: '../../Content/TemplateContents/slider/assets/images/desert.jpg', 
    text: ['Nice image', 'Awesome photograph', 'That is so cool', 'I love that'][slides.length % 4], 
    id: currIndex++, 
    MainText: 'BOOTSTRAP CAROUSEL MAKER', 
    SubText: 'some text' 
}); 
slides.push({ 
    image: '../../Content/TemplateContents/slider/assets/images/jumbotron.jpg', 
    text: ['Nice image', 'Awesome photograph', 'That is so cool', 'I love that'][slides.length % 4], 
    id: currIndex++, 
    MainText: 'MOBILE BOOTSTRAP CAROUSEL', 
    SubText: 'some text' 
}); 
slides.push({ 
    image: '../../Content/TemplateContents/slider/assets/images/man-back.jpg', 
    text: ['Nice image', 'Awesome photograph', 'That is so cool', 'I love that'][slides.length % 4], 
    id: currIndex++, 
    MainText: 'BOOTSTRAP SLIDER MAKER FREE DOWNLOAD', 
    SubText: 'some text' 
}); 

};

谢谢...

Answer 1

传送带的默认实现是专为图像，它不支持具有任何其他媒介。因此，将视频插入您的传送带是不可能的。