Highlighted

Controlling video Component(s) with different videos (HTML5 canvas)

New Here ,
Jan 25, 2020

Copy link to clipboard

Copied

Hi there, I have a project, in which I use an HTML5 Canvas to control/fire a bunch of videos (Video Components) by means of custom buttons in order to create some kind of interactive video. The idea is:

 

  1. to control the video by means of said custom buttons (works fine, especially thanks to ClayUUID),
  2. to trigger other videos either  by means of buttons - and/or 
  3. after a specific video has ended. 

 

For the last two points, I managed to achieve what I want, but in a pretty cumbersome way, i.e. directing to other frames with the same structure but new instance names for all elements. But actually, all elements do the same thing; so I am wondering how to do that in a more efficient way.

 

For example: if, after the end of a Video (V2), I want to jump to the next one (V3), I use this:

 

var Dif2 = setInterval(function () {
var condiA = V2.duration;
var condiB = V2.currentTime;
if (condiA == condiB) {
_this.gotoAndStop ("V3"); //where I start with the same code again, but this time for V3
clearInterval (Dif2);
}
}, 100);

 

...and in frame "V3" I start again to define where every button/condition is supposed to lead to. Well, it works, but I guess this is kind of silly and dangerous (working with around 50 video snippets, it is most likely that some copy/pasted code will be wrong). 

 

For the buttons, I follow the indications of ClayUUID, which you can see here.

 

So I am wondering how I can use the same buttons and code to load different videos into the same video component in a way  I don't have to create a new frame for every video and assign new instance names to every button, variable or function.

 

I already discovered the code snippet included in the "actions" window for loading new content into a video component, but in the way I applied it, it doesn't work. So I suppose that I don't understand how to put the code in the right order - or how to define the scope of things. 

 

I'd very much appreciate any hint. Thanks in advance. 

 

TOPICS
Code, How to

Views

48

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Controlling video Component(s) with different videos (HTML5 canvas)

New Here ,
Jan 25, 2020

Copy link to clipboard

Copied

Hi there, I have a project, in which I use an HTML5 Canvas to control/fire a bunch of videos (Video Components) by means of custom buttons in order to create some kind of interactive video. The idea is:

 

  1. to control the video by means of said custom buttons (works fine, especially thanks to ClayUUID),
  2. to trigger other videos either  by means of buttons - and/or 
  3. after a specific video has ended. 

 

For the last two points, I managed to achieve what I want, but in a pretty cumbersome way, i.e. directing to other frames with the same structure but new instance names for all elements. But actually, all elements do the same thing; so I am wondering how to do that in a more efficient way.

 

For example: if, after the end of a Video (V2), I want to jump to the next one (V3), I use this:

 

var Dif2 = setInterval(function () {
var condiA = V2.duration;
var condiB = V2.currentTime;
if (condiA == condiB) {
_this.gotoAndStop ("V3"); //where I start with the same code again, but this time for V3
clearInterval (Dif2);
}
}, 100);

 

...and in frame "V3" I start again to define where every button/condition is supposed to lead to. Well, it works, but I guess this is kind of silly and dangerous (working with around 50 video snippets, it is most likely that some copy/pasted code will be wrong). 

 

For the buttons, I follow the indications of ClayUUID, which you can see here.

 

So I am wondering how I can use the same buttons and code to load different videos into the same video component in a way  I don't have to create a new frame for every video and assign new instance names to every button, variable or function.

 

I already discovered the code snippet included in the "actions" window for loading new content into a video component, but in the way I applied it, it doesn't work. So I suppose that I don't understand how to put the code in the right order - or how to define the scope of things. 

 

I'd very much appreciate any hint. Thanks in advance. 

 

TOPICS
Code, How to

Views

49

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jan 25, 2020 0

Have something to add?

Join the conversation