javascript - 在视频中使用轨道 slider

Question

我有一个关于 Orbit Slider 的问题.

我想在 slider 中放置一个 YouTube 视频。我用div和embed来替换img并且成功了。视频可以播放和停止。

我的问题是，当用户在 slider 中的视频上按播放时，如何使 slider 的计时器停止？

Answer 1

如果您查看 Orbit slider javascript，它会使用事件来工作。在 Orbit JS 文件中查找这些代码

  this.$element.bind('orbit.start', function (event, index) {
    self.startClock();
  });

  this.$element.bind('orbit.stop', function (event, index) {
    self.stopClock();
  });

这些将事件“orbit.stop”和“orbit.start”事件绑定(bind)到 HTML 元素(当使用 Foundation 方式设置 Orbit 时，该元素通常具有 ID“featured”)。因此，如果您触发这些事件，例如HTML 元素中的“orbit.stop”将调用函数 stopClock()。以下内容应该有所帮助...

HTML

<a id="stop-button" href="#" class="button rounded">stop</a>
<a id="start-button" href="#" class="button rounded">start</a>

Javascript

$('#stop-button').on('click',function(){
    $('#featured').trigger('orbit.stop');
});

$('#start-button').on('click',function(){
    $('#featured').trigger('orbit.start');
});


/*using the setup 
<div id="featured">
  <img src="../images/orbit-demo/demo1.jpg" />
  <img src="../images/orbit-demo/demo2.jpg" />
  <img src="../images/orbit-demo/demo3.jpg" />
</div>
*/