小编new*_*dev的帖子

我一直在努力寻求帮助,以便在用户滚动时让视频暂停.我已经能够找到html5视频的帮助,但现在我还需要知道如何使用youtube API.

我嵌入YouTube的html结构如下

     <div class="ytube-container">

     <iframe id="vplayer" 
      src="//www.youtube.com/embed/qKaMgJwBItM?modestbranding=1&showinfo=0&modestbranding=0&controls=1&rel=0&autoplay=1&vq=hd720" 
    frameborder="0"webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

    </div>

我在html5中使用了以下内容 - youtube API是否有一个非常不同的方法来做同样的事情？

    <script>
    //play when video is visible
    var videos = document.getElementsByTagName("video"), fraction = 0.8;

    function checkScroll() {

    for(var i = 0; i < videos.length; i++) {
    var video = videos[i];
    var x = 0,
    y = 0,
    w = video.offsetWidth,
    h = video.offsetHeight,
    r, //right
    b, //bottom
    visibleX, visibleY, visible,
    parent;

    parent = video;
    while (parent && parent !== document.body) {
    x += parent.offsetLeft;
    y …

我正在尝试使用光滑的Slider来创建一个滑块,允许用户选择该部分的标题并查看它的幻灯片,同时也为其提供自动播放选项.

东西很好用.但是我需要一些方法来对应,以便当它自动播放时,它对应于活动导航并改变它的颜色.

现在它只显示活动幻灯片标题的新颜色,如果用户点击它.我希望它也能在自动播放中这样做

我该怎么办？

这是我现在正在使用的代码

Js Bin

我唯一改变的是浮动滑块演示中不存在的自动播放选项

 $('.slider-for').slick({
 slidesToShow: 1,
 slidesToScroll: 1,
 arrows: false,
 fade: true,
 asNavFor: '.slider-nav',
 autoplay:true

  });
$('.slider-nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: true,
centerMode: true,
focusOnSelect: true
});