Skip to main content
A
Anonymous
June 9, 2020
Answered

Video component oder binding video with code?

  • June 9, 2020
  • 1 reply
  • 538 views

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!

This topic has been closed for replies.
Correct answer JoãoCésar17023019

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

1 reply

JoãoCésar17023019
Community Expert
JoãoCésar17023019Community ExpertCorrect answer
Community Expert
June 9, 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)
            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

A
Anonymous
June 15, 2020

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

 

Regards,

Adele

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