• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Component-Videocontrol of a Background-Loop-Video

Community Beginner ,
Jul 18, 2023 Jul 18, 2023

Copy link to clipboard

Copied

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

Views

170

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
community guidelines

correct answers 1 Correct answer

Community Beginner , Jul 19, 2023 Jul 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

...

Votes

Translate

Translate
Community Expert ,
Jul 18, 2023 Jul 18, 2023

Copy link to clipboard

Copied

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.

Votes

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
community guidelines
Community Beginner ,
Jul 18, 2023 Jul 18, 2023

Copy link to clipboard

Copied

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?

Votes

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
community guidelines
Community Beginner ,
Jul 19, 2023 Jul 19, 2023

Copy link to clipboard

Copied

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

Votes

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
community guidelines
Community Expert ,
Jul 19, 2023 Jul 19, 2023

Copy link to clipboard

Copied

must not have any sound in that video, then.

Votes

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
community guidelines
Community Beginner ,
Jul 19, 2023 Jul 19, 2023

Copy link to clipboard

Copied

indeed - no sound allowed.

Votes

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
community guidelines
Community Expert ,
Jul 19, 2023 Jul 19, 2023

Copy link to clipboard

Copied

LATEST

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

Votes

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
community guidelines