Component-Videocontrol of a Background-Loop-Video

[Massimo P.]

Hello.
Actually I thought: "Simple thing" - now I've been working on it all day....

For a HTML5 banner I want to include a looping background video. The Z-index, since there is a component video on top, I reset it that way since you can see the timeline content:

var dom_container = document.getElementById("dom_overlay_container");
dom_container.style.zIndex=-1;

Before that I placed the video component and gave it an instance. In the parameters, I specified the file path and checked "play in loop" - everything else unchecked. The video is supposed to start in the first keyframe with:

this.videoinstance.on("added", function() {
    $("#videoinstance")[0].play();
}, this, true);

and in the last key stopping with:

this.videoinstance.on("added", function() {
    $("#videoinstance")[0].pause();
}, this, true);

But it does not start 😞
I tried with "auto-start" in the parameter and stop-command, but this was really buggy... after a view seconds the video begins to loop again and the browser crashed... :0

How can I place a *looping* video *in the background* that starts *immediately* at the beginning and *stops* at the end of the timeline and is displayed by *every browser*.

Thanks all for help or ideas. Cheers Massimo

[kglad]

a user has to interact with (eg, click on) your app before you can play audio and/or video, ie, use a landing page that prompts the user to click and then display your video with the autoplay and loop parameters ticked.

[Massimo P.]

according to the banner guidelines, animations (including videos or moving images) are allowed to run automatically for the first 15 seconds without interaction. regardless of this, i am concerned with the control of the component, for which i am looking for a solution... any idea?

[Massimo P. · Accepted solution]

I found a SOLUTION on my own:

01. Create a new HTML5 Canvas document with Adobe Animate
02. Convert and optimize your movieloop to e.g. mp4 with a tool like handbrake
03. Open the componentspanel (strg+F7) and drag the videocomponent to stage
04. Select it and in its componentparameter window select the path to your movie file and check auto-start, loop, preload

05. In the component properties name the instance e.g. "myloop"
06. To set the video behind your timeline animation as background, make your stage color transparent and give your dom overlay a z-index -1 with this in the first timeline keyframe...

var dom_container = document.getElementById("dom_overlay_container");
dom_container.style.zIndex=-1;

07. Select the component on stage an add on the last keyframe of your timeline animation where you want to stopp your loop:

/* loopvideo stopp */
$("#myloop")[0].pause();
/* timeline stopp */
this.stop();

 thats it. have fun...

[kglad]

must not have any sound in that video, then.

[Massimo P.]

indeed - no sound allowed.

[kglad]

got it.  (and thanks for your solution, too.)