Switch between videos in real time

[Guest]

Hello, I have 3 videos, from 3 different angles and I wanted to know how the user watching them can switch between angles in real time.

I want to make a looped version where you see 3 buttons (A,B,C) on the lower-left part of the screen, it starts at angle A and just keeps looping. When you press B you go to angle B, when you press C to angle C and so on. Thanks.

[Colin Holgate]

In what environment does this have to play back?

[Guest]

I wanted to make a simple flash file for a site. But I don't know exactly how to loop and mute them when you switch between angles so you don't hear 3 sounds at the same time.

[Colin Holgate]

I went ahead and assumed you were wanting HTML5! Here's what I came up with, but the general technique should work for AS3 as well:

var video;

showvid("va");

stage.addEventListener("click",vidb);

this.stop();

function vidb(e){

  showvid("vb");

}

function showvid(vidname){

  video = document.getElementById("va");

  video.style.display = "none";

  video.play();

  video = document.getElementById("vb");

  video.style.display = "none";

  video.play();

  video = document.getElementById("vc");

  video.style.display = "none";

  video.play();

  video = document.getElementById(vidname);

  video.style.display = "block";

}

In my test I had a shape in the background, just to make the stage click work. It starts with playing a video that I gave an instance name of "va", then when I click it hides va, vb, and vc, and then shows vb.

As for sound, are they due to have the same sound? If they do, just put the sound into one of the three, then you don't have to mute anything.

For AS3 you could have three FLVPlayback components, and just set the visible of them to true or false.

[Colin Holgate]

Making it be AS3 wasn't hard. This is where there are three FLVPlayback components on stage, again named va, vb, vc:

var video;

showvid("va");

stage.addEventListener("click",vidb);

this.stop();

function vidb(e){

  showvid("vb");

}

function showvid(vidname){

  video = getChildByName("va");

  video.visible = false;

  video.play();

  video = getChildByName("vb");

  video.visible = false;

  video.play();

  video = getChildByName("vc");

  video.visible = false;

  video.play();

  video = getChildByName(vidname);

  video.visible = true;

  video.play();

}

Making FLVPlayback loop is harder though (it's just a checkbox for HTML5 video). See this idea for how to do the loop:

How to do a loop or looping video using the FLVplayback with AS3 · GitHub

[Guest]

Oh yeah I forgot to tell you it was AS3, thank you so much for the answer! This is my first time working on something like this. I'll give it a try

[Colin Holgate · Accepted solution]

If it's just AS3 you can directly talk to the instances by name, which would make the code a bit shorter:

showvid(va);

stage.addEventListener(MouseEvent.CLICK,vidb);

stop();

function vidb(e:MouseEvent){

  showvid(vb);

}

function showvid(vidinstance:FLVPlayback){

  va.visible = false;

  va.play();

  vb.visible = false;

  vb.play();

  vc.visible = false;

  vc.play();

  vidinstance.visible = true;

}