Highlighted

Video component oder binding video with code?

New Here ,
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!

Adobe Community Professional
Correct answer by JoãoCésar | Adobe Community Professional

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

TOPICS
ActionScript, Code, How to, Missing feature

Views

200

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

Video component oder binding video with code?

New Here ,
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!

Adobe Community Professional
Correct answer by JoãoCésar | Adobe Community Professional

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

TOPICS
ActionScript, Code, How to, Missing feature

Views

201

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
Jun 09, 2020 0
Adobe Community Professional ,
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

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

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
Reply
Loading...
Jun 09, 2020 0
AdeleS LATEST
New Here ,
Jun 15, 2020

Copy link to clipboard

Copied

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
Reply
Loading...
Jun 15, 2020 0