Next jquery video

Question

In the absence of the user video is included. When active, it turns off. The first video is played, the user clicks and the video is turned off, the user is not active again and the SECOND video is already activated. If the second is reproduced, then the THIRD turns on and so on in a circle. How to make such a sequence? You also need to make an interval between playbacks. Whatever the first, for example, ends and passes some time before the second is turned on. Thank.

<video id="video" autoplay=""> <source class="vidActive" src=""> <source src=""> <source src=""> </video>

Js:

 idleTimer = null; $("#video").prop("muted", true); $(document).bind('mousemove keydown scroll', function() { clearTimeout(idleTimer); if(idleState == true){ $(".video-container").css("display", "none"); $("#video").prop("muted", true); } idleState = true; idleTimer = setTimeout(function() { $(".video-container").css("display", "block"); $("#video").prop("muted", false); idleState = true; return false; }, idleWait); });

@VadimOvchinnikov if the stop occurred on the 1st video, then the activation of the second video, if on the 2nd - it should be played 3e and so on in a circle

Accepted Answer · 2016-12-31T06:44:08

Set one video source for video

 <video id="video" autoplay=""> <source class="vidActive" src=""> </video>

Take an array of strings with src necessary videos. Also the index variable that will hold the index.

 idleTimer = null; // к примеру, есть такой массив var videoSources = [ "videos/vasya.mp4", "videos/kostya.mp4", "videos/petya.mp4" ]; var index = 0; $("#video").prop("muted", true); $(document).bind('mousemove keydown scroll', function() { clearTimeout(idleTimer); if (idleState == true) { $(".video-container").css("display", "none"); $("#video").prop("muted", true); } idleState = true; idleTimer = setTimeout(function() { $("#video source").attr("src", videoSources[index]); $("#video")[0].load(); index++; // Для проигрывания видео по кругу if (index == videoSources.length) index = 0; $(".video-container").css("display", "block"); $("#video").prop("muted", false); idleState = true; return false; }, idleWait); });

To play the video in a circle, you need handling for the $("#video") event of the ended :

 var idleState = true; var idleTimer = null; // к примеру, есть такой массив var videoSources = [ "videos/vasya.mp4", "videos/kostya.mp4", "videos/petya.mp4" ]; var index = 0; $("#video").prop("muted", true); // вынесем в отдельную функцию проигрывание следующего видео function playNextVideo() { $("#video source").attr("src", videoSources[index]); $("#video")[0].load(); index++; // Для проигрывания видео по кругу if (index == videoSources.length) index = 0; } $(document).bind('mousemove keydown scroll', function() { clearTimeout(idleTimer); if (idleState) { $(".video-container").css("display", "none"); $("#video").prop("muted", true); } idleState = true; idleTimer = setTimeout(function() { playNextVideo(); $(".video-container").css("display", "block"); $("#video").prop("muted", false); idleState = true; return false; }, idleWait); }); $("#video").bind("ended", function() { if (idleState) { // можете установить другой интервал setTimeout(playNextVideo, 500); } });

Thank you very much, but can you still find out how to make the interval between playback?
What would the first, for example, end and pass some time before the second turned on?
@Atomrr that is, when the first one ended, the second one just played?
When the user does nothing, they have to go further and in a circle?
And if the user's activity has not appeared - the video is in a circle and there is an interval of several seconds between them.

Next jquery video

1 answer 1

More articles: