首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >Jquery Cycle2:在同一个幻灯片中以不同的方式处理图像和视频

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

Stack Overflow用户
提问于 2016-01-07 08:17:05
回答 2查看 1.2K关注 0票数 0

我一直在使用Cycle2在一个网站上的图片幻灯片,我已经被要求添加一个视频到幻灯片。

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

然而,当它有图像和视频的组合时,我无法很好地理解幻灯片的工作方式。

当幻灯片只是图像时,我在幻灯片调用中使用了这段代码,它非常好地工作:

数据周期.延迟=“1000”数据周期.超时值=“5000”数据周期.速度=“900”数据周期.暂停-对悬停=“真”

但是,除非我将数据周期超时的5000更改为0,如下所示,视频在进入下一张幻灯片之前只播放一小段时间:

数据周期超时=“0”

是否有一种方法可以让Cycle2在一张幻灯片中对图像和视频的行为有所不同?

如果有图像,用这个..。

数据周期.超时=“5000”数据周期.暂停-对-悬停=“真”

如果是视频,用这个..。

数据周期超时=“0”

理想的情况下,幻灯片中的任何图片都会在数到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的完整代码.)

代码语言:javascript
代码运行次数:0
运行
复制
<!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>
EN

回答 2

Stack Overflow用户

发布于 2016-01-13 18:59:03

我认为最好的方法是使用Cycle2的API (http://jquery.malsup.com/cycle2/api/)手动重新创建自动播放功能。这将允许您设置每次幻灯片的时间,并根据事件提前,而不是计时器。粗略地说,我就是这样做的:

首先,给每个幻灯片一个类或数据属性,以区分包含视频和包含图像的幻灯片。

使用paused选项启动幻灯片暂停,这样它就不会单独前进

使用以下逻辑创建cycle-initialized (幻灯片准备就绪时调用)和cycle-after (在幻灯片转换后调用)事件处理程序:

测试当前幻灯片是否是使用您添加的特殊类的图像或视频。

如果是图像幻灯片,则创建一个等待5000‘s的setTimeout,然后调用$('.cycle-slideshow').cycle('next')以推进幻灯片显示

如果是视频幻灯片,请使用YouTube API (reference#Events)连接到播放机的onStateChange事件。当状态更改为0(这意味着视频已经结束)时,调用$('.cycle-slideshow').cycle('next')以推进幻灯片显示。您不能仅仅将超时设置为视频的长度,因为用户可能会暂停视频,或者必须等待缓冲。你不想让它在比赛中前进!

希望这能帮上忙!

票数 0
EN

Stack Overflow用户

发布于 2018-02-28 12:44:51

代码语言:javascript
代码运行次数:0
运行
复制
$('#slider').cycle({
  fx: 'scrollHorz',
  slides: '.slide',
  timeout: 6000,
  pagerActiveClass: 'active'
 });
代码语言:javascript
代码运行次数:0
运行
复制
#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%; 
}
代码语言:javascript
代码运行次数:0
运行
复制
<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 -->

有关更多细节,请参考此链接。我认为哪一种有用

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

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/34650242

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档