Loop transparent (alpha) video?


#1

Hi there, sorry if this is a simple question. I’m trying to do a loop / restart function with this project I’m working on now. It has a transparent alpha video file. I can’t seem to figure out how to write the correct code, I can’t seem to find the right solution in the tutorials.

var display_shown = symbol.controllers.display.elements.shown;
var display_hidden = symbol.controllers.display.elements.hidden;
var Rick__ZapworksTutorial_test1_mp4 = symbol.nodes.Rick__ZapworksTutorial_test1_mp4;

parent.on(“show”, parent_show);
function parent_show() {

// Make sure we start from fully hidden
display_hidden.reset();

// Move to the shown state
display_shown.activate();

// Start the video
Rick__ZapworksTutorial_test1_mp4.start();

// Finish the video

Rick__ZapworksTutorial_test1_mp4.on("finish", videoFinished);

function videoFinished() {
//code to run when the myVideo video is finished
}

// Start the video
Rick__ZapworksTutorial_test1_mp4.start();
}
// Finish the video

Rick__ZapworksTutorial_test1_mp4.on("finish", videoFinished);

function videoFinished() {
//

}


#2

Hey @msirois,

I’m having a hard time understanding where you are putting your code.
I’ve created this for my reference to use a trained image to track and replace with a looping video. It is barebones, but, gets things going.

I hope it helps.
Bill

TRACKING TRAINED IMAGE & REPLACE WITH LOOPING VIDEO ANIMATION

  1. Import image “Train Image” This image will be what is seen by camera and followed

  2. Drag/Import .MP4 video file

  3. Drag trained image to “ROOT” in left column. File name will appear with .ZPT0 at end. Everything gets nested under this image.

  4. Drag in Plane from right to nest under trained image. Then size it to being the same size as the trained image

  5. Drag in the video to the Trained Image name to nest it. All this does is associate it. No moving sizing is necessary.

  6. ADD SCRIPTS - This is where you will get to control the showing and playing of the video. You have two types of scripts to add. Seen and NotSeen. They are added by right clicking on the Trained Image name in the left column.

  7. New>Script>Seen and New>Script>UnSeen

  8. They will nest under the image.

  9. VIDEO>PLANE

  10. Select the plane in the left column.

  11. Below in the Properties panel. Materials will now have the name of the video under it. Select it to assign.

  12. ADD PROGRAMMING TO SCRIPTS: Seen, Notseen & Show

    SEEN PROGRAMMING BELOW- - - - - - - - - - - - - -

    // CONST for PNG parent => Drag in to establish
    const TRAINED_IMG_pngzpt0 = parent;

    // CONST for MOVIE SYMBOL => Drag in to establish from left column
    const MOVIE_FILE_mp40 = symbol.nodes.MOVIE_FILE_mp40;

    parent.on(“seen”, () => {
    // Runs when seen occurs on the parent node
    RECON_ROCBLUE_pngzpt0.visible(true);
    //Video VARIABLE for RESTART
    MOVIE_FILE_mp40.restart();
    });

NOTSEEN PROGRAMMING BELOW - - - - - - - - - - - - - -

// const Variable is the name of the Trained Image
const  TRAINED_IMG_pngzpt0 = parent;
parent.on("notseen", () => {
    // Runs when notseen occurs on the parent node
    //CHANGE TO Parent PNG Variable
    TRAINED_IMG_pngzpt0.visible(false);  
});

SHOW SCRIPT PROGRAMMING BELOW- - - - - - - - - - - - - -

    var display_shown = symbol.controllers.display.elements.shown;
    var display_hidden = symbol.controllers.display.elements.hidden;

//DRAG IN Video for Variable to create
const MOVIE_FILE_mp40 = symbol.nodes.MOVIE_FILE_mp40;

parent.on("show", parent_show);
function parent_show() {
    
    // Make sure we start from fully hidden
    display_hidden.reset();
    
    // Move to the shown state
    display_shown.activate();
    
// Play the video
    MOVIE_FILE_mp40.start(); 
}
// CREATE FUNCTION FOR Looping Video
function videoFinishedLoop() {
       MOVIE_FILE_mp40.restart();
}
//LAUNCH FUNCTION FOR Looping Video
MOVIE_FILE_mp40.on("finish",videoFinishedLoop);

#3

Thanks for the help! I’m having one issue and I’m not sure what it’s referring to. The rest of your steps I’ve completed.


#4

Hi @msirois,

It looks like the quotation marks in parent.on("seen") were pasted from @mydarndest’s code snippet with formatting and aren’t being recognised.

If you type them manually the error should disappear.

All the best,
Seb


#5

Smart quotes. Who knew they could be a bad thing.
(Typography Joke) :smirk:

I save my code in Google Docs. Copy>Paste.
Interesting it was not striped out.


#7

@sebastian @mydarndest Ok, I have the video file looping now, but there are a couple of issues. One: the video starts playing automatically, as opposed to when you show the tracking image to the camera. And two: the video stops playing and then restarts anytime you look away from the tracking image. Based on this code, what would fix that? I deleted some stuff but it ended up breaking the project.