how to make video appear after a background video finishes

Question

How can I code a background video that will play through, and after it runs to the end. Another video shows up (that was previously hidden) on top of my background video. I saw this post with a start, but I can't for the life of me, figure out how to make the second video pop up after my background video ends. Detect when an HTML5 video finishes

This is my background video:

<video autoplay preload muted playsinline id="bgvid"> <source src="videos/akira.mp4" type="video/mp4"> <source src="videos/akira.webm" type="video.webm"> </video>

And this is the video I want to embed after my background video finishes playing:

<video controls muted playsinline id="akiratrailer">
<source src="videos/akiratrailer.mp4" type="video/mp4">
<source src="videos/akiratrailer.webm" type="video.webm">
</video>

And this is my CSS

<style media="screen" type="text/css">

        video#bgvid { 
        position: fixed;
        top: 50%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        z-index: -100;
        -ms-transform: translateX(-50%) translateY(-50%);
        -moz-transform: translateX(-50%) translateY(-50%);
        -webkit-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
        background-size: cover; 
        overflow: hidden;
        }

        #body{
        position: fixed;
        height: 100%;
        width: 100%;
        }

</style>

alex · Answer 1 · 2018-06-10T08:45:48.877

I tested with an other video because i can't access yours. The code below is to run a video after another :

<!DOCTYPE html> 
<html> 
<body> 

<p>Press play and wait for the video to end.</p>

<video autoplay preload muted playsinline id="bgvid" width="320" height="176" controls>
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>
<br/>
<video  muted playsinline id="akiratrailer" controls>
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

<script>
var vid = document.getElementById("bgvid");
vid.onended = function() {
    document.getElementById('akiratrailer').play();
};
</script>

<p>Videos courtesy of <a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.</p>

</body> 
</html>

It run if you try there : https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_av_event_ended2

just copy my code, go on the link, delete everything, paste my code on the link and run it to see the result.

Furthermore, if you want to switch video1 and video2 you can do that :

<!DOCTYPE html> 
<html> 
<body> 

<p>Press play and wait for the video to end.</p>

<video autoplay preload muted playsinline id="bgvid" width="320" height="176" controls>
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>
<br/>
<video  muted playsinline id="akiratrailer" controls style="display:none">
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>


<script>
var vid = document.getElementById("bgvid");
var vid2 = document.getElementById('akiratrailer');
vid.onended = function() {
    vid.style.display = "none";
    vid2.style.display = "block";
    vid2.play();

};
</script>

<p>Videos courtesy of <a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.</p>

</body> 
</html>

But i have just one video to run the test, so it seems it is the same video witch loop. But it's not it is two distinct videos. You'll have to try with yours to see.

And if you want to show the second video at the end of the first above the first witch is in background you can do :

<!DOCTYPE html> 
<html> 
<body> 

<p>Press play and wait for the video to end.</p>

<video autoplay preload muted playsinline id="bgvid" width="320" height="176" controls>
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>
<br/>
<video  muted playsinline id="akiratrailer" controls style="display:none">
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>


<script>
var vid = document.getElementById("bgvid");
var vid2 = document.getElementById('akiratrailer');
vid.onended = function() {
    //vid.style.display = "none";
    vid2.style.display = "block";
    vid2.play();

};
</script>

<p>Videos courtesy of <a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.</p>

</body> 
</html>

Thanks, but I'm trying to make the second video hidden at first. So when my first (background) video ends, the second video will unhide itself. I was thinking of ghetto coding this by putting a delay fade in on the second video. But even then how would I code that? I was looking at this for reference **[LINK](https://stackoverflow.com/questions/11679567/using-css-for-fade-in-effect-on-page-load)** — Andi Zhu, Jun 10 '18 at 02:04
You can do : hide the first video and show the second the way you want inside the vid.onended = function(){, what you do there is done after the video finish. I propose you to hide the second video on the page load, then, at the end of the first video, hide the first video and show the second. — alex, Jun 10 '18 at 02:11
Is there anyway to not hide the first video after the video finishes, because it's acting as a background for the webpage. So basically what I'm looking for is to have the first background video finish and have it stay there while the second video unhides itself after the first background video finishes and stays in the background. That's why I was proposing doing a fade in transition using CSS, I know it works for text, but will it work for videos? — Andi Zhu, Jun 10 '18 at 03:46
I added a third case for not hiding the first video. You have to comment the line vid.style.display = "none"; in the vid.onended = function(). I just have your two video tags, so i can't see how it can run with your css without your whole code — alex, Jun 10 '18 at 08:52
Thanks, I took out the vid.style.display = "none" and it worked. BTW is there anyway to fade in a video? I know how to fade in text using css, but idk if it works the same way for videos. Also, I edited and posted my css code. — Andi Zhu, Jun 10 '18 at 09:35

how to make video appear after a background video finishes

1 Answers1