如何解决如何在 Ember JS 中的 Carousel 中显示视频 {{carousel-container}}

我是 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 中自动缩放。你能告诉我如何在 Carousel 中显示视频吗？

解决方法

余烬旋转木马

Carousel 组件的 ember 插件

DEMO

用法

在您的 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