Video component oder binding video with code?

New Here ,
Jun 09, 2020 Jun 09, 2020

Copy link to clipboard

Copied

Hi everyone,

 

I have the following problems with building a video sitebar in Animate:

 

First thing I've tried is binding a video with code like as:

this.video = document.createElement('video');
this.video.src='video.mp4'
this.video.autoplay = true;
this.video.controls = true;
this.video.muted = true;

Works well until I try to loop the video exactly 3 times and then stop. I only can make it loop either infinite or not. Is there a possibility to make it loop 3 times and then stop? 

 

Other way I've tried is to work with components. The problem here is, that I can not implement a layer behind the video as well as in front of the video. I want to play the video in front of a background picture but behind my sound off and sound on buttons.

 

Maybe one of you guys can tell me which way to prefer or how to solve those problems? 

Help would be much appreciated!!

 

Thank you in advance!

TOPICS
ActionScript, Code, How to, Missing feature

Views

243

Likes

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

Adobe Community Professional , Jun 09, 2020 Jun 09, 2020
Hi. You can detect the end of the video and then replay it as many times as you need. Regarding to the layering, if all that you need in the background is a simple image, then you can change the background of the body using CSS. Example: var count = 0; var total = 3; setTimeout(function() { var video = document.getElementById("video0"); // "video0" is the instance name of the video component video.addEventListener("ended", function(e) { if (++count < total) ...

Likes

Translate

Translate
Adobe Community Professional ,
Jun 09, 2020 Jun 09, 2020

Copy link to clipboard

Copied

Hi.

 

You can detect the end of the video and then replay it as many times as you need. Regarding to the layering, if all that you need in the background is a simple image, then you can change the background of the body using CSS.

 

Example:

 

var count = 0;
var total = 3;

setTimeout(function()
{
    var video = document.getElementById("video0"); // "video0" is the instance name of the video component

    video.addEventListener("ended", function(e)
    {
        if (++count < total)
            e.currentTarget.play();
    });
}, 0);

document.body.style.cssText = "background-image: url('YOUR_IMAGE.jpg'); background-size: cover;";
canvas.style.zIndex = 1;
canvas.style.backgroundColor = "rgba(0,0,0,0)";

 

 

Please notice that the loop property of the video must be set to false.

 

If you need your layers to be more complex, you can create one of them in another FLA, publish it, and then bring the output as an overlay using an iframe tag.

 

Please let us know if you have any further questions.

 

Regards,

JC

Likes

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
New Here ,
Jun 15, 2020 Jun 15, 2020

Copy link to clipboard

Copied

LATEST

Great! That worked out perfectly! Thank you so much! 🙂 

 

Regards,

Adele

Likes

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