472,794 Members | 2,383 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,794 software developers and data experts.

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>
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. });
  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. });
  23. $('video').on('ended',function()
  24. {            
  25.     console.log('Video Complete')
  26.     $('.col1').slick('slickPlay');
  27. });
Sep 16 '15 #1
0 3329

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

Similar topics

by: Omar Hamido | last post by:
How i can do video capture with c#...more especific, i have a video capture card pci and my question is: if possible to do that... regards... Omar
by: Jim | last post by:
Can anybody suggest a starting point for me to learn how to develop a slick interface like TuneUp Utilities (http://www.flickr.com/photos/16037380@N00/80803270/) in VB.Net?
by: Israel | last post by:
The problem: I want to know, definitively when a slider loses focus after a user has started sliding and hasn't released the mouse yet. It appears that this is captured with the WM_ACTIVATEAPP...
by: teah | last post by:
For eg: i got part A to part D of video, same for my treeview items. theres video A to video D on the treeview. when playing part A of the video, video A of treeview item is highlighted, how do i...
by: tayss | last post by:
2. Header << Play Video (a) and (b) on click a) sub header 1 << Play Video (a) only on click b) sub header 2 << Play Video (b) only on click When I click 2....
by: MrOnno | last post by:
Hiii, I've a massive list with video links i want to insert into a slider. But all my work so far failed. (I am a amateur) I need a slider with a left and right button, and 4 links in the middle...
by: UmairahMohd | last post by:
.theme-default #slider { width:570px; /* Make sure your images are the same size */ height:227px; /* Make sure your images are the same size */ float: right; margin-top: 0px; margin-right:...
by: tdrsam | last post by:
I cannot figure out why my slider won't run. I had it working fine, then I tried to make it scroll vertically rather than horizontally and now it's broken, even though I've reset all the settings to...
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 2 August 2023 starting at 18:00 UK time (6PM UTC+1) and finishing at about 19:15 (7.15PM) The start time is equivalent to 19:00 (7PM) in Central...
by: linyimin | last post by:
Spring Startup Analyzer generates an interactive Spring application startup report that lets you understand what contributes to the application startup time and helps to optimize it. Support for...
by: erikbower65 | last post by:
Here's a concise step-by-step guide for manually installing IntelliJ IDEA: 1. Download: Visit the official JetBrains website and download the IntelliJ IDEA Community or Ultimate edition based on...
by: kcodez | last post by:
As a H5 game development enthusiast, I recently wrote a very interesting little game - Toy Claw ((http://claw.kjeek.com/))。Here I will summarize and share the development experience here, and hope it...
by: Taofi | last post by:
I try to insert a new record but the error message says the number of query names and destination fields are not the same This are my field names ID, Budgeted, Actual, Status and Differences ...
by: Rina0 | last post by:
I am looking for a Python code to find the longest common subsequence of two strings. I found this blog post that describes the length of longest common subsequence problem and provides a solution in...
by: DJRhino | last post by:
Private Sub CboDrawingID_BeforeUpdate(Cancel As Integer) If = 310029923 Or 310030138 Or 310030152 Or 310030346 Or 310030348 Or _ 310030356 Or 310030359 Or 310030362 Or...
by: lllomh | last post by:
How does React native implement an English player?
by: DJRhino | last post by:
Was curious if anyone else was having this same issue or not.... I was just Up/Down graded to windows 11 and now my access combo boxes are not acting right. With win 10 I could start typing...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.