Loading videos on-the-fly

Question

I'm relatively new in web programming, and hence have problems keeping my code clean. Working on the last project, among other matters, I had to do the following:

1. Autoplay on the main page one of eight available videos (for example, main-vid-3.webm);
2. When it ends, start playing the next one (in that case, main-vid-4.webm);
3. Then play the next video and so on. After the eighth video, main-vid-1 must be played.

If I started playing the next video right after the previous one ended, I had a lag since new video wasn't loaded yet. My solution of the problem:

1. Two video tags on the page, one of them has display: none;
2. When the video with display: block ends, it hides while the other video appears and starts playing;
3. When that video is playing, source of the hidden video changes with JS and starts loading (but not playing yet);
4. repeat step 2;

It worked, but my code (especially JS part and necessity of having two video tags on the page) doesn't seem for me clean and fine. Is there any better solution of the problem?

 <section id="main-page-top"> <video id="bgvid-<?php echo $vidId; ?>" autoplay width="100%"> <source src="<?php echo get_template_directory_uri(); ?>/inc/main-vid-<?php echo $vidId; ?>.webm" type="video/webm"> </video> <video id="bgvid-<?php echo ($vidId + 1); ?>" class="hidden" width="100%"> <source src="<?php echo get_template_directory_uri(); ?>/inc/main-vid-<?php echo $vidIdAlt; ?>.webm" type="video/webm"> </video> </section> 

 document.getElementById('#main-page-top video:nth-child(1)').addEventListener('ended', function() { document.getElementById('#main-page-top video:nth-child(1)').style.display = "none"; document.getElementById('#main-page-top video:nth-child(2)').style.display = "block"; document.getElementById('#main-page-top video:nth-child(2)').play(); var vidNum = parseInt(document.getElementById('#main-page-top video:nth-child(1)').id.substring(6)); if (vidNum === 7) { vidNum = -1; } else if (vidNum === 8) { vidNum = 0; } document.getElementById('#main-page-top video:nth-child(1)').setAttribute('id', 'bgvid-' + (vidNum + 2)); document.getElementById('#main-page-top video:nth-child(1) source').setAttribute('src', 'http://u0065000.isp.regruhosting.ru/template/inc/main-vid-' + (vidNum + 2) + '.webm'); document.getElementById('#main-page-top video:nth-child(1)').setAttribute("poster", "http://u0065000.isp.regruhosting.ru/template/inc/main-vid-" + (vidNum + 2) + ".jpg"); document.getElementById('#main-page-top video:nth-child(1)').load(); document.getElementById('#main-page-top video:nth-child(1)').pause(); }); document.getElementById('#main-page-top video:nth-child(2)').addEventListener('ended', function() { document.getElementById('#main-page-top video:nth-child(2)').style.display = "none"; document.getElementById('#main-page-top video:nth-child(1)').style.display = "block"; document.getElementById('#main-page-top video:nth-child(1)').play(); var vidNum = parseInt(document.getElementById('#main-page-top video:nth-child(2)').id.substring(6)); if (vidNum === 7) { vidNum = -1; } else if (vidNum === 8) { vidNum = 0; } document.getElementById('#main-page-top video:nth-child(2)').setAttribute('id', 'bgvid-' + (vidNum + 2)); document.getElementById('#main-page-top video:nth-child(2) source').setAttribute('src', 'http://u0065000.isp.regruhosting.ru/template/inc/main-vid-' + (vidNum + 2) + '.webm'); document.getElementById('#main-page-top video:nth-child(2)').setAttribute("poster", "http://u0065000.isp.regruhosting.ru/template/inc/main-vid-" + (vidNum + 2) + ".jpg"); document.getElementById('#main-page-top video:nth-child(2)').load(); document.getElementById('#main-page-top video:nth-child(2)').pause(); }); 

Answer 1

Thank you guys. I can't find if I can mark your comments as right answers.

Now the code looks like this (added a function for fading in/out):

 var vidFading = function(p1, p2) { $(p1).on('timeupdate', function(event) { var current = Math.round(event.target.currentTime * 1000); var total = Math.round(event.target.duration * 1000); if ((total - current) < 500) { $(this).fadeOut("slow"); $(p2).fadeIn(1000); } }); } var vidFoo = function(p1, p2) { var x = document.querySelector(p1); var x1 = document.querySelector(p1 + ' source') var y = document.querySelector(p2); y.play(); var vidNum = parseInt(document.querySelector(p1).id.substring(6)); if (vidNum === 7) { vidNum = -1; } else if (vidNum === 8) { vidNum = 0; } x.setAttribute('id', 'bgvid-' + (vidNum + 2)); x1.setAttribute('src', 'http://u0065000.isp.regruhosting.ru/template/inc/main-vid-' + (vidNum + 2) + '.webm'); x.setAttribute("poster", "http://u0065000.isp.regruhosting.ru/template/inc/main-vid-" + (vidNum + 2) + ".jpg"); x.load(); x.pause(); } if (document.getElementById('main-page')) { vidFading('#main-page-vid video:nth-child(1)', '#main-page-vid video:nth-child(2)'); vidFading('#main-page-vid video:nth-child(2)', '#main-page-vid video:nth-child(1)'); document.querySelector('#main-page-vid video:nth-child(1)').addEventListener('ended', function() { vidFoo('#main-page-vid video:nth-child(1)', '#main-page-vid video:nth-child(2)'); }); document.querySelector('#main-page-vid video:nth-child(2)').addEventListener('ended', function() { vidFoo('#main-page-vid video:nth-child(2)', '#main-page-vid video:nth-child(1)'); }); }