Video slider on landing page

Helpdesk Website Builder
,
1

Hello,

I hope to get help here :slight_smile:
I have a landing page with a video slider (http://1f579c-5b6ff.preview.ulfsiemen.de/)
The customer (video creator) wants to have auto play, which is not a problem. The problem is the sound of the videos. If I turn on the sound and klick the arrows to see the next video, still you have the sound running from the last video. Is there a solution that the sounds/video stops automatically if I click the next video?

2

Hi @Ulf_Siemen !

If I counted correctly, you have four different videos on your site.

  1. Give each video an ID with a sequential number: “video-1”, “video-2”, “video-3” and “video-4”.

  2. Add a variable that keeps track of the video that is currently running:
    var currentVideoIndex = 1

  3. Add methods to update index of video that is currently running:

function increaseCurrentVideoIndex() {
	currentVideoIndex += 1 
	// If next arrow is clicked on last video, start at first again
	if(currentVideoIndex > 4) {
		currentVideoIndex = 1
	}
}

function decreaseCurrentVideoIndex() {
	currentVideoIndex -= 1 
	// If next arrow is clicked on first video, start at last again
	if(currentVideoIndex < 0) {
		currentVideoIndex = 4
	}
}
  1. Add methods to pause and play a video:
function pauseCurrentVideo(ID) {
	var video = document.getElementById("video-"+ID);
	video.pause();
}

function playCurrentVideo(ID) {
	var video = document.getElementById("video-"+ID);
	video.play();
}
  1. Add listeners to each arrow:
$(".slick-prev").click(function() {
	pauseCurrentVideo(currentVideoIndex)
	decreaseCurrentVideoIndex()
	playCurrentVideo(currentVideoIndex)
})

$(".slick-next").click(function() {
	pauseCurrentVideo(currentVideoIndex)
	increaseCurrentVideoIndex()
	playCurrentVideo(currentVideoIndex)
})

I have not tested this code, there might be typos and stuff. Let me know if it works.

1 Like
3

Many thanks for your answer. I will try it :slight_smile: