470,596 Members | 1,609 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 470,596 developers. It's quick & easy.

Slick Slider Video

97 64KB
I'm using Ken Wheeler's Slick Slider with some videos but for some reason the first video in the cue doesn't play.

It plays after the list has played through and it goes back to the first video, but I'm going to need it to play on page load as well.

This is the HTML:

Expand|Select|Wrap|Line Numbers
  1. <section class="col1">
  2.     <div><video width="1280px" height="720px" autoplay class="video" src="video/video1.mp4" type="video/mp4">Your browser does not support video</video></div>
  3.     <div><video width="1280px" height="720px" autoplay class="video" src="video/video2.mp4" type="video/mp4">Your browser does not support video</video></div>
  4.     <div><video width="1280px" height="720px" autoplay class="video" src="video/video3.mp4" type="video/mp4">Your browser does not support video</video></div>
  5.     <div><video width="1280px" height="720px" autoplay class="video" src="video/video4.mp4" type="video/mp4">Your browser does not support video</video></div>
  6.     <div><video width="1280px" height="720px" autoplay class="video" src="video/video5.mp4" type="video/mp4">Your browser does not support video</video></div>
  7.     <div><video width="1280px" height="720px" autoplay class="video" src="video/video6.mp4" type="video/mp4">Your browser does not support video</video></div>
  8. </section>
  9.  
This is the JS:

Expand|Select|Wrap|Line Numbers
  1. $(document).ready(function(){
  2.     $('.col1').slick({
  3.     autoplay: true,
  4.     autoplaySpeed: 7000,
  5.     fade: true,
  6.     pauseOnHover: false,
  7.   });
  8. });
  9.  
  10.  
  11.  
  12.  
  13. $('.col1').on('afterChange', function(event, slick, currentSlide)
  14. {
  15.     var vid = $(slick.$slides[currentSlide]).find('video');
  16.     if (vid.length > 0)
  17.     {
  18.         $('.col1').slick('slickPlay');
  19.     $(vid).get(0).play();
  20.     }
  21. });
  22.  
  23. $('video').on('ended',function()
  24. {            
  25.     console.log('Video Complete')
  26.     $('.col1').slick('slickPlay');
  27. });
  28.  
Sep 16 '15 #1
0 3152

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

1 post views Thread by Omar Hamido | last post: by
6 posts views Thread by Jim | last post: by
reply views Thread by MrOnno | last post: by
reply views Thread by tdrsam | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.