Home/ Questions/Q 756857
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T15:17:38+00:00

I have two videos, and I want to loop the first video until the

  • 0

I have two videos, and I want to loop the first video until the user clicks the mouse, at which point I want to switch to playing the second video. Does anyone know what the best way to do this would be?

Edit: Sorry, to clarify, I would prefer to use HTML 5 (assuming this is possible). I am trying to have the two videos swapped out seamlessly, one on top of another. I want it to look like clicking the mouse made the video finish or progress. So I need to pause/hide the first one and show/play the second one.

Update: With Galen’s help and some Google searches, I figured it out:

<html xmlns="http://www.w3.org/1999/xhtml">
<script type="text/javascript">
function swapVideos() {
    var video1 = document.getElementsByTagName('video')[0];
    video1.pause();
    video1.style.display = 'none';
    var video2 = document.getElementsByTagName('video')[1];
    video2.play();
}
</script>
<body>
<video src="video1.ogg" controls="controls" loop="loop" autoplay="autoplay" onclick="swapVideos();">
your browser does not support the video tag
</video>
<video src="video2.ogg" controls="controls" preload="preload">
your browser does not support the video tag
</video>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Add this code to the click event of whatever you want 

    // pause first video
var video1 = document.getElementsByTagName('video')[0];
video1.pause();
// play second video
var video2 = document.getElementsByTagName('video')[1];
video2.play();

    Add this to make the first video loop

    var video1 = document.getElementsByTagName('video')[0];
video1.addEventListener('ended', function () {
    video1.play();
});
    • 0