Skip to main content
aldor10080202
aldor10080202
Participating Frequently
March 12, 2019
Answered

HTML5 - Why VIDEO components play only once?

  • March 12, 2019
  • 2 replies
  • 1616 views

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

This topic has been closed for replies.
Correct answer kdmemory

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:

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

2 replies

M
mohd fahrizal
Participant
October 19, 2019

mmohdfahrizal7@gmail.com

kdmemory
kdmemory
Inspiring
March 12, 2019

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:

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:

Maybe this helps

Klaus

    aldor10080202
    aldor10080202Author
    Participating Frequently
    March 28, 2019

    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!

      kdmemory
      kdmemory
      Inspiring
      March 29, 2019

      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

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