在光滑轮播中添加视频自动播放功能 [英] add autoplay for video in slick carousel

问题描述

我在我的页面上使用了圆滑的旋转木马 http://kenwheeler.github.io/slick/ 现在我需要添加自动播放视频。

我使用此代码

HTML

 < div class =main-sliderid =main-slider> 
< div> 
< div class =video-wrapper> 
< video autoplay loop class =pageBackground-video> 
< source src =/ Content / video / 332145276.mp4type =video / mp4> 
< / video> 
< / div> 
< / div> 
< div> 
< div class =video-wrapper> 
< video autoplay loop class =pageBackground-video> 
< source src =/ Content / video / 332145276.mp4type =video / mp4> 
< / video> 
< / div> 
< / div> 
< / div> 
  

和脚本

 < （
 slidesToShow：1，
 slidesToScroll：1，
 autoplay：true，
 autoplaySpeed：30000，code> $（'＃main-slider' 
 dots：true，
 infinite：true，
 adaptiveHeight：true，
 arrows：false 
}）; 
  

但自动播放不起作用。有什么方法可以让自动播放起作用？

upd
我试过使用

$ b （'afterChange'，function（event，slick，currentSlide，nextSlide）{
var video = currentSlide。$ b

  $（'＃main-slider'）。 （'video'）。get（0）.play（）; 
}）; 
  

但是我得到一个错误 Uncaught TypeError：currentSlide.children不是函数因为 currentSlide 它只是一个数字（0,1等）。如何获取当前元素？

upd2 我使用此代码并且它可以工作

<$ $（'＃main-slider'）。on（'afterChange'，function（event，slick，currentSlide，nextSlide）{
$（'＃main-slider .slick （'video'）。get（0）.pause（）;
var video = $（'＃main-slider .slick-active'）。find（'video'）。get （0）.play（）;
}）;

现在可以完美地自动播放所有视频，但只能在第一次更改后才能播放。如何使它在第一个视频后才能工作。

upd3 我使用了此代码

  var video = $（'＃main-slider .slick-active'）。find（'video'）。get（0）.play（）; 
 $ b $（'＃main-slider'）。on（'afterChange'，function（event，slick，currentSlide，nextSlide）{
 $（'＃main-slider .slick-slide '）.find（'video'）。get（0）.pause（）; 
 var video = $（'＃main-slider .slick-active'）。find（'video'）。get（0 ）.play（）; 
}）; 
  

现在所有的工作都是我想要的，但是我怕我的代码很丑陋（

解决方案

您可以直接从视频标记中获取ID并

  $（＃videotagId）。pause（）; 
  

I use slick carousel http://kenwheeler.github.io/slick/ on my page and now I need to add video with autoplay in it.
I use this code
HTML

<div class="main-slider" id="main-slider">
            <div>
                <div class="video-wrapper">
                    <video autoplay loop class="pageBackground-video">
                        <source src="/Content/video/332145276.mp4" type="video/mp4">
                    </video>
                </div>
            </div>
            <div>
                <div class="video-wrapper">
                    <video autoplay loop class="pageBackground-video">
                        <source src="/Content/video/332145276.mp4" type="video/mp4">
                    </video>
                </div>
            </div>          
        </div>

and script

$('#main-slider').slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      autoplay: true,
      autoplaySpeed: 30000,
      dots: true,
      infinite: true,
      adaptiveHeight: true,
      arrows: false
  });

but autoplay doesn't work. Is there any way to make autoplay work?

upd I tried to use

$('#main-slider').on('afterChange', function(event, slick, currentSlide, nextSlide){
  var video = currentSlide.children('video').get(0).play();
});

but I get an error Uncaught TypeError: currentSlide.children is not a function because currentSlide it's just a number (0,1,etc). How to get current element?

upd2 I used this code and it works

$('#main-slider').on('afterChange', function(event, slick, currentSlide, nextSlide){
    $('#main-slider .slick-slide').find('video').get(0).pause();
    var video = $('#main-slider .slick-active').find('video').get(0).play();
});

but now autoplay work for all video perfectly but only after first slick changes. How to make it work for the first video after page only loaded.

upd3 I used this code

 var video = $('#main-slider .slick-active').find('video').get(0).play();

  $('#main-slider').on('afterChange', function(event, slick, currentSlide, nextSlide){
    $('#main-slider .slick-slide').find('video').get(0).pause();
    var video = $('#main-slider .slick-active').find('video').get(0).play();
});

and now all work as I want but I'm afraid my code is ugly (

解决方案

You Can Just get the id from the video tag and

$("#videotagId").pause();

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