在滑块中自动播放视频

Question

我正在使用 cycle2 插件，并且我有一个视频库，我想要的是在显示当前幻灯片时自动播放视频。

他确实有一个类似的插件，但它看起来只适用于 youtube，而我正在使用带有后备功能的 video html 标签： http://jquery.malsup.com/cycle2/demo/video.php

显然我无法将自动播放添加到视频中，因为它们都同时播放并且不知道如何处理。 Is there a way around from his api url: http://jquery.malsup.com/cycle2/api/ or will i have to create a function from scratch that when a certain slider is selected, play/stop.

我也在使用他网站上的哈希示例。

如果有人对从哪里开始或解决方案的正确方向有任何想法，我将不胜感激，因为我已经看了好几个小时了！

以下是视频如何集成到 cycle2 滑块中的示例链接：

http://jsfiddle.net/8dcWv/

<video width="100%" height="100%" controls="controls">
  <source type="video/mp4" src="" />
  <source type="video/webm" src="" />
  <source type="video/ogg" src="" />
  <object width="100%" height="100%" type="application/x-shockwave-flash" data="">
  <param name="movie" value="" />
  <param name="flashvars" value="controls=true&file=" />
  </object>
</video>

插件网址：http://jquery.malsup.com/cycle2/demo/video.php

此网址可能有助于触发第一张幻灯片：https://github.com/malsup/cycle2/issues/25

Answer 1

我认为这样的事情应该可行。

//Triggered after the slideshow has completed transitioning to the next slide.
$( '#mySlideshow' ).on( 'cycle-after', function(event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
    $('video', incomingSlideEl)[0].play();
});

//Triggered just prior to a transition to a new slide.
$( '#mySlideshow' ).on( 'cycle-before', function(event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
    $('video', outgoingSlideEl)[0].pause();
});