user1388356 user1388356 - 11 months ago 67
jQuery Question

Jquery Cycle with Video

I am trying to create an automated slideshow on my website with multiple images, videos (some embedded from YouTube), and other similar media using jQuery Cycle. Since Cycle has various transitions I prefer this rather than Cycle 2. I was able to create slideshow that pulls up all images and videos, but the video on the page starts automatically even before it gets displayed. I need the video to play when it is displaying/focused instead of when the page loads. How can I start playing the video when it is focused/displayed on jQuery Cycle?

<script type="text/javascript">
$(document).ready(function() {

fx: 'all', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
timeoutFn: calculateTimeout,
//before: onBefore,
//after: onAfter,

var timeouts = [];
function calculateTimeout(currElement, nextElement, opts, isForward) {
var index = opts.currSlide;
return timeouts[index] * 1000;

function addTimeout(timeoutInSec){

<c:forEach var="listValue" items="${list}">
<div class="slideshow" style="width: 100%; height: 100%;">
<c:if test="${listValue.getType().getName() eq 'IMAGE'}">
<img src="${imagefile}"/>

<c:if test="${listValue.getType().getName() eq 'VIDEO'}">
<video id="video" controls autoplay loop style="width: 100%; height: 100%;">
<source src="abc.mp4">

Answer Source

You can launch the video wia javascript/jQuery using such a function :

var video = $('#video').get(0);;

So basically, you need to remove the autoplay attribute from the video tag, and use the piece of code above when the video is made visible (see the onAfter section).

Notice that you can use (or not) the video.load() function. Right now, you are preloading every video in your slideshow, this can cause performance issue.