CODEWITHSUNDEEP
javascripthtmlvideo
Junko Funko
Junko Funko

Reputation: 11

HTML javascript play video, but when button is clicked, play different video once, and then go back to the original video

I want to play default video on loop, but when button is clicked, I want to play another video once, and then go back to the video that was playing. Right now i can press button to switch to vid2, but cannot switch back to the original video. How can I play video once and switch back to the old video? Thanks in advance.

<!DOCTYPE html> 
<html> 
<body> 
<video width="1920" id="src.mp4" autoplay controls loop>
  <source src="vid1.mp4" type="video/mp4">
  Your browser does not support HTML video.
</video>

<button type="button" name="button" onclick="playVid2()">Click me to change the video</button>

<script>
function playVid2(){
  var video =  document.getElementById("src.mp4");
  video.src = 'vid2.mp4';
  video.load();
  video.play();
  video.src = 'vid1.mp4';
  video.load();
  video.play();
}
</script>
</body> 
</html>

Upvotes: 1

Views: 856

Answers (1)

Jacob Hansen
Jacob Hansen

Reputation: 148

You should be able to listen if the video ends and then load the first video again.

function playVid2()
{
    var video = document.getElementById("src.mp4");
    video.src = 'vid2.mp4';
    video.load(); video.play();

    video.addEventListener('ended', on_Vid_Ended, false);
}

function on_Vid_Ended( evt )
{
    evt.target.removeEventListener(evt.type, handler);
    video.src = 'vid1.mp4';
    video.load(); video.play();
}

Also unsubscribe the eventlistener after it's fired, to not leave leaks.

Upvotes: 1

Related Questions