在滑块中自动播放视频 [英] autoplay video in slider

问题描述

我正在使用cycle2插件，并且我有一个视频库，而当显示当前幻灯片时，我会自动播放视频.

I am using the cycle2 plugin, and i have a video gallery and what i am after is when the current slide is shown, autoplay the video.

他确实为此提供了一个类似的插件，但看起来它仅适用于youtube，而我正在使用视频html标签和后备广告: http://jquery.malsup.com/cycle2/demo/video.php

He does have a similar plugin for this but it looks like it's only for youtube whereas i am using the video html tag with fallbacks: http://jquery.malsup.com/cycle2/demo/video.php

很显然，我无法将自动播放添加到视频中，因为它们都可以一次播放并且不确定如何处理.有没有办法解决他的api网址: http://jquery.malsup.com/cycle2/api/或将我必须从头开始创建，当选择了某滑块，播放/停止功能.

Obviously i cant can't add autoplay to the videos as they all play at once and not sure how to handle this. 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.

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

I am using his hashing example that is on his website as well.

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

If anyone has any ideas where to start or the right direction to a solution i would be grateful as i've looked at this for hours!

以下是一个示例链接，说明如何将视频集成到cycle2滑块中:

Here is a link to an example of how the video is integrated into the cycle2 slider:

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/周期2/问题/25

This url could be helpful to trigger first slide: https://github.com/malsup/cycle2/issues/25

推荐答案

我认为类似的方法应该可行.

I think something like this should work.

//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();
});

这篇关于在滑块中自动播放视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！