Replace code in timeline of a symbol

Question

My question is:
I built a symbol and name it videoholder. Inside the symbol i draw a Rectangel and
named it: Rectangel.
Iput the following code on the first frame/millisecond:
var video_path = sym.$("Rectangel");
video_path.html('<video width= "750" height= "421" src = "example.mp4" type = "video/mp4" controls= "controls" </video>');
Then I delete the symbol from the stage.
Now I placed different images as symbols on the stage.
When I click on these images i get the videoholder_image on the stage via createChildSymbol from the library.
What I want is to put a code on each image_symbol which allows me to change the code
inside the videoholder Rectangel:
var video_path = sym.$("Rectangel");
video_path.html('<video width= "750" height= "421" src = "example_new.mp4" type = "video/mp4" controls= "controls" </video>');
I appreciate any hlep

Answer 1

1) Your project is difficult to decipher with elements named Rectangle or TextCopy. Give descriptive names, or yourself will get lost when opening your own project in a few months
It's more legible when instance names correspond to the name of the symbol. For example videoHolder_1 instance of videoHolder (and if there is a second instance, you name it videoHolder_2).
2) Do not use a trigger sym.stop() at 0 ms. Instead uncheck the autoplay property of the symbol (may be the stage symbol).
3) In your symbol videoholder, you used a trigger at 0 ms. A good place for initialization is the creationComplete event handler of the symbol.
But for now this code should be commented out as it will be replaced by the execution of function chooseVideo.
4) Why are you using Tweenmax ? The primary interest of Edge Animate is to easily tween in the timeline.
5) work-all > work01 : looks like useless, a second work-all.
6) First error. In your videoholder > trigger at 0 ms : sym.$("Rectangel")
But in the function chooseVideo : sym.$("Holder"); // should be "Rectangel"
7) Second error. you define the global function but nowhere it is called !
So, tabula rasa. A works symbol nests two symbols w_01 and w_02, the access buttons to each of the two videos.
A videoHolder symbol contains
- a headline element, text that will receive the title ;
- a videoFrame element, rectangle that will hold the <video> tag ;
- a back_btn symbol.
The stage has its autoplay property set to false. Clicking on either of the buttons plays at label video where videoHolder_1 slides up (and works has its display property set to none). A sym.stop() trigger at the end position.
document.compositionready event handler :
sym.chooseVideo = function( numChoice)
  var radical = "";
  var title = "";
  switch( numChoice)
    case 1:
      radical = "video1";
      title = "This is video 1";
      break;
    case 2:
      radical = "video2";
      title = "And this one is video 2";
      break;
  // build the <video> tag by concatenation
  var video_tag = '<video width="750" height="421" src="video/';
  video_tag += radical;
  video_tag += '.mp4" poster="video/';
  video_tag += radical;
  video_tag += '.png" type="video/mp4" controls="controls" </video>';
  var video_H = sym.getSymbol( 'videoHolder_1');
  video_H.$('videoFrame').html( video_tag);
  video_H.$('headline').html( title);
  sym.play( 'video');
works > w_01.click event handler :
sym.getComposition().getStage().chooseVideo( 1);
works > w_02.click event handler :
sym.getComposition().getStage().chooseVideo( 2);
Download the example here : https://app.box.com/s/ykrvwvy3fclrdbwbwxff
Gil