HTML5 - Why VIDEO components play only once?

Community Beginner ,
Mar 12, 2019 Mar 12, 2019

Copy link to clipboard

Copied

Hello everyone,

I have this problem in HTML 5.

I have several videos that change at every frame.

At every frame there is a different video (inserted through video component JS).

There are two buttons.

The first button stops at this.currentframe + 1

The second button stops at this.currentframe -1

Actually, this works very well with images but not with videos.

Unfortunately it seems to me that VIDEO COMPONENTS PLAY ONLY ONCE.

At the second click (for instance if I click on the button that goes this.currentframe -1) the video (placed at the frame before) disappears.

Maybe there is some code I have to insert somewhere there.

Can you help me?

Thank you in advance

TOPICS
Discussions

Views

701

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

Advocate , Mar 29, 2019 Mar 29, 2019
Hi AldorI had a look at your file. The problem that the video disappears after coming back to frame 0 (the first frame) doesn't occur for me. I'm a little unsure, maybe your version of the video component is somewhat wrong or old. Look at this:On the left is the Component Parameters panel in my Animate Version 19.0, on the left is yours. There are some options missing in yours. Which version of Animate are you using?However, there was a problem in the code, which I admit, came from me with my mi...

Likes

Translate

Translate
Advocate ,
Mar 12, 2019 Mar 12, 2019

Copy link to clipboard

Copied

Hi Aldor

I testet your scenario and I can't see a problem.

I made 4 frames and on frames 2, 3, 4 are four different videos. In my timeline it looks like this:

Screenshot 2019-03-12 at 17.19.03.png

I set two button, one called "t_prev", the other one "t_next".

The javascript in the first frame:

var here = this;

this.stop();

here.t_next.on("click", function () {

    here.gotoAndStop(here.currentFrame + 1);

}, here, false);

here.t_prev.on("click", function () {

    here.gotoAndStop(here.currentFrame - 1);

}, here, false);

I actually was a bit sceptical at first whether your scenario would work at all. That's because how video components in HTML5 Canvas are placed. They are not within the canvas, they lie in the HTML structure (DOM) of the HTML document. To be precise, they are floating over your canvas in a division with the id "dom_overlay_container". i feared that such a radical change from frame to frame would cause some problems. But it works fine. I can jump forward or backwards, the videos start and play again and again.

Maybe something about your Parameters of the video component? But I don't think you can do much wrong here. These are mine:

Screenshot 2019-03-12 at 17.33.31.png

Maybe this helps

Klaus

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
Community Beginner ,
Mar 28, 2019 Mar 28, 2019

Copy link to clipboard

Copied

Dear kdmemory,

thank you very much for your help. Sorry for this late reply but I had troubles here so I could not work for a while.

However, I have to say that I newly tested the scene following your advices but it still does not work!!

When I go back to the first, where the video is places, it seems to disappear.

Please find the test scene I'm working on at this link: https://filebin.net/vcyj3h95yrf9bxr0

Your test would be of great help!

Thank you very much!

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
Advocate ,
Mar 29, 2019 Mar 29, 2019

Copy link to clipboard

Copied

Hi

i downloaded your file and have a look later. Please be a bit patient. I'm very busy right now but will come back to you.

Klaus

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
Advocate ,
Mar 29, 2019 Mar 29, 2019

Copy link to clipboard

Copied

Hi Aldor

I had a look at your file. The problem that the video disappears after coming back to frame 0 (the first frame) doesn't occur for me. I'm a little unsure, maybe your version of the video component is somewhat wrong or old. Look at this:

Screenshot 2019-03-29 at 14.37.42.pngScreenshot 2019-03-29 at 14.37.22.png

On the left is the Component Parameters panel in my Animate Version 19.0, on the left is yours. There are some options missing in yours. Which version of Animate are you using?

However, there was a problem in the code, which I admit, came from me with my mistake. The two click eventHandlers for t_next and t_prev are added each time you come back to frame 0 where the code is. This produced quite weird problems like jumping to the next happened twice or more times on just one click depending how often one marched repeatedly through the frames. Because in your setup there are only 3 altogether, this weirdness came about very easily.

Try using in your file test_video.fla (the one you shared) this new code:

var here = this;

var lastFrame = here.totalFrames - 1;

here.stop();

here.clickHandler = function (e) {

    var etn = e.target.name;

    var nextFrame;

    if (etn == "t_next") {

        nextFrame = here.currentFrame + 1;

        if (nextFrame > lastFrame) {

            nextFrame = 0;

        }

        here.gotoAndStop(nextFrame);

    } else if (etn == "t_prev") {

        nextFrame = here.currentFrame - 1;

        if (nextFrame < 0) {

            nextFrame = lastFrame;

        }

        here.gotoAndStop(nextFrame);

    }

};

if (!here.started) {

    here.on("click", here.clickHandler, here, false);

    here.started = true;

}

I'm using here only one eventHandler for the clicks. This way I need to make just one time sure that the handler is added only once through If(!here.started). The next time coming to frame 0 here.started is true and the eventHandler isn't added anymore. This code enables also that the series of frames can be looped. When one comes to the last frame, the code sends the playhead back to the first frame. Similar it deals with going back.

With this the video plays fine everytime one reaches frame 0. Try it out.

Klaus

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
Community Beginner ,
Apr 04, 2019 Apr 04, 2019

Copy link to clipboard

Copied

thank you very much Klaus!

Now it works perfectly!!

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 ,
Jul 01, 2020 Jul 01, 2020

Copy link to clipboard

Copied

LATEST

Hi Klaus

 

Im hoping you or others can kindly give clear understanding on how I can create a Video Component in HTML Canvas that will play a list of dynamic Videos, plays automatically one after the other in a loop.

Also is it possible to have a way where we can play above scenario using a Video, Image (X seconds), Video 2, Image 2 (Y Seconds) in a loop.

 

Would really appreciate if someone can respond asap.

Cheers Guys !!

 

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 ,
Oct 19, 2019 Oct 19, 2019

Copy link to clipboard

Copied

mmohdfahrizal7@gmail.com

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