16757

autoplay video in slider

Question:

I am using the cycle2 plugin, and i have a video gallery and what i am after is when the current slide is shown, autoplay the video.

He does have a similar plugin for this but it looks like it's only for youtube whereas i am using the video html tag with fallbacks: <a href="http://jquery.malsup.com/cycle2/demo/video.php" rel="nofollow">http://jquery.malsup.com/cycle2/demo/video.php</a>

Obviously i cant can't add autoplay to the videos as they all play at once and not sure how to handle this. Is there a way around from his api url: <a href="http://jquery.malsup.com/cycle2/api/" rel="nofollow">http://jquery.malsup.com/cycle2/api/</a> or will i have to create a function from scratch that when a certain slider is selected, play/stop.

I am using his hashing example that is on his website as well.

If anyone has any ideas where to start or the right direction to a solution i would be grateful as i've looked at this for hours!

Here is a link to an example of how the video is integrated into the cycle2 slider:

<a href="http://jsfiddle.net/8dcWv/" rel="nofollow">http://jsfiddle.net/8dcWv/</a>

<video width="100%" height="100%" controls="controls"> <source type="video/mp4" src="" /> <source type="video/webm" src="" /> <source type="video/ogg" src="" /> <object width="100%" height="100%" type="application/x-shockwave-flash" data=""> <param name="movie" value="" /> <param name="flashvars" value="controls=true&file=" /> </object> </video>

plugin url: <a href="http://jquery.malsup.com/cycle2/demo/video.php" rel="nofollow">http://jquery.malsup.com/cycle2/demo/video.php</a>

This url could be helpful to trigger first slide: <a href="https://github.com/malsup/cycle2/issues/25" rel="nofollow">https://github.com/malsup/cycle2/issues/25</a>

Answer1:

I think something like this should work.

//Triggered after the slideshow has completed transitioning to the next slide. $( '#mySlideshow' ).on( 'cycle-after', function(event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) { $('video', incomingSlideEl)[0].play(); }); //Triggered just prior to a transition to a new slide. $( '#mySlideshow' ).on( 'cycle-before', function(event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) { $('video', outgoingSlideEl)[0].pause(); });

Recommend

  • Update All Rows in DataBase with a hash value [closed]
  • Is it possible to change the Hashing algorithm in django_auth?
  • Including an Angular2 application to Asp.Net Webforms Page
  • CSS Bundling and Internet Explorer's Limit
  • Function to check if jquery plugins are already initialized
  • Determining signed state for HDF5 variables in NetCDF
  • Java set and contains
  • Is there a filesystem plugin available for django?
  • How can I create, read, update and delete Mediawiki articles via scripts?
  • Price range slider for my website
  • Keep transition effect on 1 div from moving the div that follows?
  • How can I tell a form not to dispose a particular control when it closes?
  • Image map in Flex
  • Who propagate bugfixes across branches (corporate development)?
  • SonarQube: Cannot deactivate rule with missing quality profile
  • MySQL Order by column = x, column asc?
  • How to run “Deployd” on port 80 instead of port 5000 in webserver.
  • How to attach a node.js readable stream to a Sendgrid email?
  • Typescript - Unable to get 'import' statement to function
  • QLineEdit password safety
  • Is there any way to access browser form field suggestions from JavaScript?
  • Trying to switch camera back to front but getting exception
  • Hazelcast - OperationTimeoutException
  • RestKit - RKRequestDelegate does not exist
  • Circular dependency while pushing http interceptor
  • Comma separated Values
  • using conditional logic : check if record exists; if it does, update it, if not, create it
  • Unit Testing MVC Web Application in Visual Studio and Problem with QTAgent
  • Revoking OAuth Access Token Results in 404 Not Found
  • AngularJs get employee from factory
  • Error creating VM instance in Google Compute Engine
  • How to set the response of a form post action to a iframe source?
  • Hits per day in Google Big Query
  • how does django model after text[] in postgresql [duplicate]
  • Change div Background jquery
  • Binding checkboxes to object values in AngularJs
  • Net Present Value in Excel for Grouped Recurring CF
  • How to push additional view controllers onto NavigationController but keep the TabBar?
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize
  • How to load view controller without button in storyboard?