Stop video sound with action

Hi. I’m putting a video in a pop up window using its own timeline within a single scene. The user clicks a button, the video pops up lightbox style and then plays. The video works fine but I’ve added a ‘close’ button to the pop up so that the user can get rid of it, however no matter what I try (javascript functions etc) I can’t get the audio of the video to stop playing when the window closes back down. Note that the video is not in its own scene so I can’t use an ‘on scene unload’ type thing. Is it possible to control switch off the video/audio with an action attached to the close button?

Thanks
Roger

Hava a look at

Creating Play & Pause Buttons for Video

Since I had an similar problem today I want to share my solution with you.
hypeDocument.getElementById('videoclip').muted = true;
I put this code in an JavaScript function. videoclip is the ID of the video. So add an ID you like to your video and change the code.

1 Like

Hi Roger!

@Michi solution looks good. I have my code in a stand alone button, i.e. innerHTML, and I am using “.pause();” instead of “.muted = true;” as I want the user to be able to resume the video where they left off if they desire. You might wish to use “stop();” instead of “.pause();”.

<button onclick="pauseVid()" type="button">X</button> 

<script> 
function pauseVid() { 
   bh_selectedVid.pause(); // "bh_selectedVid" > variable for the current video
   $(bh_selectedVid).hide();
   document.getElementById("CloseVideo").hide(); // get rid of the close button
} 
</script>
2 Likes

Just being pedantic, The above is using jQuery. :slight_smile:

There is no stop() function in vanilla JS :wink: however you can combine pause() with element.currentTime = 0; element being your video.

If you are using / want to use vanilla JS then you could change to:

<button onclick="stopVid()" type="button">X</button>

<script>
function stopVid() {
    bh_selectedVid.pause();
    bh_selectedVid.currentTime = 0;
    bh_selectedVid.style.display = "none";
    document.getElementById("CloseVideo").style.display = "none";
}
</script>

If you want to "unhide" anything set it's display to "" or "initial"; (or anything else you can do with display if you want :wink: )

element.style.display = "initial"; // puts display back to default value
2 Likes

Wow. Thanks guys. Some great suggestions here. I’m back on it this morning and I’ll try them out. I did find a work around by making new scenes with a dummy background that looked like my ‘selection’ page, but with the popped up video. That way I can transition instantly to the scene, play the video, then on clicking the close button jump back to the selection screen thus stopping the audio playback. I did lose my nice scaling on the popup though so I’ll try the javascript methods to make it work.

Cheers
Roger