Skip to main content
Massimo P.
Massimo P.
Participant
July 18, 2023
Answered

Component-Videocontrol of a Background-Loop-Video

  • July 18, 2023
  • 1 reply
  • 445 views

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

    This topic has been closed for replies.
    Correct answer Massimo P.

    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...

    1 reply

    kglad
    Community Expert
    kgladCommunity Expert
    Community Expert
    July 18, 2023

    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.
    Massimo P.Author
    Participant
    July 19, 2023

    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.
    Massimo P.AuthorCorrect answer
    Participant
    July 19, 2023

    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...

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices