Video component oder binding video with code?

[Guest]

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!

[JoãoCésar · Accepted solution]

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

[Guest]

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

Regards,

Adele