如何在Ember JS的旋转木马中显示视频

Question

我是ember的新手。在这个ember应用程序中，遗留代码显示图像，但我想在图像之间添加一些视频。

我的测试代码如下所示，这里只是用视频替换图像。

{{!-- Carousel --}}
{{#bs-carousel
class=(concat "carousel" (if imagesLoading ' invisible height-none'))
autoPlay=false
interval=0
wrap=true
model=imageCaptures
showControls=showControls
showIndicators=showIndicators
index=activeImage
as |caro|}}
{{#each imageCaptures as |slide|}}
{{#caro.slide}}
{{!-- <img alt='' src='{{slide.image_url}}'> --}}
<video>
<source src='{{slide.image_url}} type="video/mp4"'>
</video>
{{/caro.slide}}
{{/each}}
{{/bs-carousel}}

显示视频，但它是剪切的，而不是在显示图像的div中自动缩放。你能告诉我如何在旋转木马中显示视频吗？

Answer 1

成员转盘

旋转木马组件的成员插件

演示

用法

在Ember CLI应用程序中，运行以下命令：

ember install ember-carousel

添加调用组件如下

{{#carousel-container transitionInterval=400 as |ui controls|}}
<div class="carousel-body">
{{#ui.item}}
Emberjs
{{/ui.item}}
{{#ui.item}}
Reactjs
{{/ui.item}}
{{#ui.item}}
Angularjs
{{/ui.item}}
</div>
<button onclick={{controls.previous}}>
Slide Left
</button>
<button onclick={{controls.next}}>
Slide Right
</button>
{{/carousel-container}}

API

{{carousel-container}}

这是开始显示转盘项目的主要组件。

属性

• transitionInterval-默认为500
• onSlide-可选，一个接收一个参数的操作，一个类似{ index: 3, previousIndex: 2, direction: 'right' }的对象
  在转换完成之前触发

屈服参数该组件产生两个散列，例如{{#carousel-container as |ui act|}}。这些参数ui和act可以被称为任何东西，但它们包含以下项目：

• ui-是一个包含以下组件项的哈希：
  • item-应该包含幻灯片内容的组件，与{{ui.item}}you content{{/ui.item}}一样使用
• controls-是一个包含以下操作项的哈希：
  • previous-更改为上一张幻灯片的关闭操作
  • next-更改为下一张幻灯片的结束操作

开发

• git clone此存储库
• npm install
• bower install

跑步

• ember server
• 访问您的应用程序http://localhost:4200.

运行测试

• ember test
• ember test --server

建筑

• ember build

有关使用ember-cli的详细信息，请访问http://www.ember-cli.com/.

来源：https://github.com/selvagsz/ember-carousel#readme