3.3 – D.S. 2 – Playing two videos

Development Step Two

Playing two videos

First step I made was just copying the code I made last week into my “code editing software” brackets and ran it in a live preview. Everything was working except the video, since it is saved locally and I did not have it in my folder.
So I took a random .mp4 that I had somewhere, named it accordingly and put it in the same folder. Now the live preview shows this video and all the functions are working accordingly.

The next step was to implement a 2nd movie. First I put another .mp4 video in the folder and declared it at the start of the code as “myVideo2” and even added another button that does not have any functionality for now. And this is what happened:

It is cut off at the bottom since you would need to scroll, but my point is that now both videos are automatically displayed above each other. And since I need only one video playing and the other one hiding until you swap them, this is a problem.
So I tried to look for a solution on w3schools by looking for html video attributes. After reading through it I thought I could load everything in as a <source> and then easily swap the videos, but as I found out it wouldn’t be that easy.

To summ up my current problem:

I need two videos loaded which you can switch at any point.

One idea of a solution would be:

Load all videos above one another and hide them using css.

The other one is:

Load everything in the source and then somehow change the source.

While I was trying to solve this problem I came up with a third solution where I would hide the videos by changing the width to 0 and then swapping them back and forth. So I came up with this code:

function swapMovie() {
if (myVideo1.paused)
myVideo1.width = 420;
myVideo2.width = 0;
myVideo1.width = 0;
myVideo2.width = 420;

This should have (at least in my head) swapped the videos back and forth and only playing the video that you can see. But somehow this didn’t work at all and I could not find any possible solution for it. So I just googled “how to switch video source” and came to this guy on stackoverflow  who had EXACTLY the same problem that I had.

He asked:

“I have a JS function that changes the video source of an HTML video. A button activates this function. It loads the same new video on switch. There are 2 videos of the same length.How do I:

  1. interchange the video every time I click the button?
  1. when i click the button, can the video load at the same time the previous video was playing?”

And the proposed solution was the following:

if (currentlyPlaying === 1) {
vid.src = src2;
currentlyPlaying = 2;
statusElement.innerText = 'Going to play video2..';
} else {
vid.src = src1;
currentlyPlaying = 1;
statusElement.innerText = 'Going to play video1..';

Here, the person answering chose a toggle function as a solution. If the first video is playing, then switch to the second one by changing the source, and else (if the second one is playing) then switch to the first.

After I took that solution and applied it to my code, I also started implementing css in mine to scale the video.

width: 640px;
height: 480px;

And these are the results:

As you can see, when toggling between the two videos, the other video always starts where the video before left off.


In this development step my goal was to have two different videos that I could play by switching in between them. I got hard stuck on one problem because I did not know the correct function of <source> but after finding the correct solution I also found out that <source> doesn’t “save” anything and only declares one source, so my first try where I wanted to save several videos in it didn’t really made any sense.