Question

我一直在网站上使用Cycle2进行图片幻灯片放映，并且我被要求在幻灯片中添加视频。

在我的静态html文件测试中，由于malsup.com网站上显示的示例，我设法让视频正常工作。

然而，当它有图像和视频的组合时，我无法完成幻灯片的工作。

当幻灯片放映只是图片时，我在幻灯片调用中调用了这段代码，效果非常好：

数据周期延迟=＆＃34; 1000＆＃34; 数据周期超时=＆＃34; 5000＆＃34; 数据周期速=＆＃34; 900＆＃34; 数据周期 - 暂停 - 上悬停=＆＃34;真＆＃34;

但是，除非我将数据周期超时5000更改为0，否则视频只会播放一小段时间，然后才能进入下一张幻灯片：

数据周期超时=＆＃34; 0＆＃34;

对于一个幻灯片中的图像和视频，循环2是否有办法使其表现不同？

例如，如果是图像，请使用此...

数据周期超时=＆＃34; 5000＆＃34; 数据周期 - 暂停 - 上悬停=＆＃34;真＆＃34;

如果是视频，请使用此...

数据周期超时=＆＃34; 0＆＃34;

理想情况下，幻灯片中的任何图像都会在计数5000后进入下一张幻灯片，而任何视频都会在进入下一张幻灯片之前播放全长。例如，假设您有一个包含以下内容的幻灯片：

   slide 1 = image (action: show for 5 seconds, then progress to next slide)
   slide 2 = 5 minute video (action: show the full 5 minute video, then progress to next slide)
   slide 3 = image (action: show for 5 seconds, then progress to next slide)
   slide 4 = image (action: show for 5 seconds, then progress to next slide)
   slide 5 = 3 minute video (action: show the full 3 minute video, then progress to next slide)
   loop

有没有人知道如何使用Cycle2实现类似的功能？

CMS是一个MODx站点，因此大多数代码都可以运行。

提前感谢您的帮助。（对于格式错误道歉。我在创建小提琴时遇到了麻烦，所以我粘贴了测试html的完整代码......）

<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Cycle2 YouTube</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>


<style>
.cycle-slideshow { max-width: 640px; margin: auto }
.cycle-slideshow > div { width: 100%; height: 100% }
.cycle-slideshow > img { width: 100%; height: 100% }
.cycle-slideshow > video { width: 100%; height: 100% }
iframe,object,embed { width: 100%; height: 100% }
</style>


</head>
<body>

<div id="main">


<h2>Videos and Images</h2>

<div class="cycle-slideshow"
   data-cycle-fx="scrollHorz"
   data-cycle-timeout="0"
   data-cycle-delay="1000"
   data-cycle-speed="900"
   data-cycle-pause-on-hover="true"
    data-cycle-prev="#prev2"
    data-cycle-next="#next2"
    data-cycle-slides=">a,>img,>video"
    data-cycle-youtube=true
    data-cycle-youtube-autostart=true
    >

    <img src="http://jquery.malsup.com/cycle2/images/p1.jpg">

    <a href="http://www.youtube.com/v/f7AU2Ozu8eo?version=3&amp;hl=en_US&amp;rel=0">Paul Irish</a>

    <img src="http://jquery.malsup.com/cycle2/images/p2.jpg">

    <a href="http://www.youtube.com/v/seX7jYI96GE?version=3&amp;hl=en_US&amp;rel=0">Alex Russel</a>

</div>
<div class=center>
    <a href=# id=prev2>&lt;&lt;Prev </a>
    <a href=# id=next2> Next&gt;&gt;</a>
</div>


</div> <!-- #main -->



<script src="http://malsup.github.io/jquery.cycle2.js"></script>
<script src="http://malsup.github.io/jquery.cycle2.video.js"></script>


</body>
</html>

Answer 1

我认为最好的方法是使用Cycle2的API（http://jquery.malsup.com/cycle2/api/）手动重新创建自动播放功能。这将允许您设置每张幻灯片的时间并根据事件而不是计时器推进它。粗略地说，这就是我要做的事情：

首先，为每张幻灯片提供一个类或数据属性，以区分包含视频的视频和包含图像的视频。

使用paused选项暂停幻灯片播放，使其无法自行前进

创建cycle-initialized（在幻灯片放映准备时调用）和cycle-after（在幻灯片转换后调用）事件处理程序，具有以下逻辑：

使用您添加的特殊课程测试当前幻灯片是图片还是视频。

如果是图片幻灯片，请创建等待5000毫秒的setTimeout，然后调用$('.cycle-slideshow').cycle('next')以推进幻灯片显示

如果是视频幻灯片，请使用YouTube API（https://developers.google.com/youtube/iframe_api_reference#Events）挂钩播放器的onStateChange事件。当状态更改为0（这表示视频已结束）时，请调用$('.cycle-slideshow').cycle('next')以推进幻灯片放映。您不能只将超时设置为视频长度，因为用户可能会暂停视频，或者可能需要等待缓冲。你不希望它在游戏中期前进！

希望有所帮助！

Answer 2

＆＃13;

$('#slider').cycle({
  fx: 'scrollHorz',
  slides: '.slide',
  timeout: 6000,
  pagerActiveClass: 'active'
 });

＆＃13;

#slider {
  width: 100%;
  margin: 0;
  border: 0;
  .slide {
    width: 100%;
    display: none;

    &:first-child {
      display: block;
    }
    .slide-inner {
      position: relative;
      img {
        width: 100%;
      }
    }
  }
}

.video-wrap { 
  position: relative; 
  //slider resolution = 1600 x 650, so this percentage is from 650/1600=0.40625
  padding-bottom: 40.625%;
  height: 0; 
  overflow: hidden;
} 

.video-wrap iframe { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
}

＆＃13;

<div id="slider" class="slider">
  <div class="slide">
    <img src="http://via.placeholder.com/1600x650" class="slide-image" alt="">
  </div>
  <!-- slide -->

  <div class="slide">
    <div class="video-wrap">
      <iframe id="player" width="560" height="315" src="https://www.youtube.com/embed/Lscb4SL58X4?enablejsapi=1"></iframe> </div>
  </div>
  <!-- slide -->
</div>
<!-- slider -->

＆＃13;

请参阅此链接了解更多详情。我认为哪个是有用的

https://www.minddevelopmentanddesign.com/blog/create-a-responsive-youtube-video-slider/

Jquery Cycle2：在同一幻灯片中以不同方式处理图像和视频

2 个答案: