I Need somew help from you JS Gurus -...

User 2699991 Photo


Registered User
3,758 posts
Online Now

Hi
I have someone I am helping with a new site they are doing Using SD5 foundation
basically, we are trying to use the "Orbit component" but instead of images, it's going to be HTML5 videos, which is ok no problem works great.

The problem I have is that if a visitor decides to choose another slide (video) before the one that is playing, then the one that is playing continues to play, so effectively there are then 2 videos playing, what I need is to somehow stop the video playing if it slides out (obviously no problem if they watch until the end.

The sliders are activated by a thumbnail image which would be the preferred choice so that not only does it bring in the relevant slide but stops the previous one from playing, of course, this may not be possible because they might not choose the next video in the order of the thumbnails this, of course, may not be possible as there are 10 slides(videos)

I am pretty sure and hope that this can be achieved using some JS magic, but I am not proficient enough at JS to figure it out (I have tried & failed)

Anyone out there who has any ideas? if it can be done would be greatly appreciated,

Here's hoping

Take care & stay safe wherever in the world you are



The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials
User 2885740 Photo


Registered User
59 posts

I might have found a solution for you. But, unfortunately I can not attach the SD5-file - the server of Coffeecup throws an error, when I try to upload. So, I give you the plain code instead.
What I did was: I added a click-event to the next- and previous-buttons of an orbit that calls a function stopVideo() that pauses the running video.

The page looks like this:
<div class="container orbit" role="region" aria-label="blabla" data-orbit="">
<div class="container orbit-wrapper">
<div class="container orbit-controls"><button type="button" class="button orbit-previous" onclick="stopVideo()">&lt;</button><button type="button" class="button orbit-next" onclick="stopVideo()">&gt;<br></button></div>
<ul class="list-container orbit-container">
<li class="list-item-container orbit-slide">
<video controls="" autoplay="" class="orbit-image">
<source src="./img/video_default.mp4" type="video/mp4">
</video>
</li>
<li class="list-item-container orbit-slide">
<video controls="" autoplay="" class="orbit-image">
<source src="./img/v1.mp4" type="video/x-m4v">
</video>
</li>
<li class="list-item-container orbit-slide is-active">
<video controls="" autoplay="" class="orbit-image">
<source src="./img/v2.mp4" type="video/mp4">
</video>
</li>
</ul>
</div>
</div>

This is the function:
function stopVideo() {
let video = document.querySelector('.is-active video')
video.pause()
}

User 2699991 Photo


Registered User
3,758 posts
Online Now

Thanks Rene
I will have a try tomorrow
Take care over there stay safe and well.

The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.