Html 5 ; button single click first time, - right. Then it needs double click from then on - wrong.

[oblong1]

I hope that made sense.

I have an HTML5 project in adobe Animate to play 4 short videos

On frame 0 there are four buttons. When you click a button it goes to another frame, plays the video there, then returns to frame 0. This all works fine.

The problem is after the first time you play a video the button requires two clicks to play the video again.

I have the script on two frames - only because I got it to work that way. 

Frame 0 script;

this.stop();

if (!this.EventSurround) {
// this if statement surrounds all the following then declares it to be true.
//NOTE: the "if" closes at the bottom and "EventSurround" is true.
//This stops the event listeners running again at frame 0

this.High_btn.addEventListener("click", High.bind(this));
this.Low_btn.addEventListener("click", Low.bind(this));
this.Dont_btn.addEventListener("click", Dont.bind(this));
this.Know_btn.addEventListener("click", Know.bind(this));

function High() {

this.gotoAndPlay(1);

}

function Low() {
this.gotoAndPlay(2);

}

function Dont() {
this.gotoAndPlay(3);

}

function Know() {
this.gotoAndPlay(4);

}

this.EventSurround = true;

}

 and frame 1 script;

this.stop();

if (!this.EventSurround1) {

this.Fig01_vid.on("added", function() {
$("#Fig01_vid")[0].play();

}, this, true);

setTimeout(function()
{
var video = document.getElementById("Fig01_vid"); // "Fig01_vid" is the video component instance name

video.addEventListener("ended", function()
{

exportRoot.gotoAndStop(0);
});

}, 1000); // in some cases this delay may be set to a higher value, like 100, 300...
// !!!!that delay at 1000 returns it back to frame zero!!!!!

}

this.EventSurround1 = true;

}

The frame 1 script is made up of JoaoCesars script from this post;

https://community.adobe.com/t5/animate/how-to-detect-the-end-of-a-video-in-a-component-before-playin...

I suspect that the problem is an event listener remove situation, but everything I try does not work.

Would appreciate any help.

[kglad]

put the video component on frame 0 and extend its layer across your timeline with no other keyframes in the video component layer.  (

add your code keyframes to assign the src of the video to your code layer at frames 2,3,4,5 (NOT frame 1 with the buttons or correct your code for the High button).

and add this code to frame 0:

this.stop();

if (!this.EventSurround1) {

this.Fig01_vid.on("added", function() {
$("#Fig01_vid")[0].play();
}, this, true);

setTimeout(function(){
var video = document.getElementById("Fig01_vid"); // "Fig01_vid" is the video component instance name
video.addEventListener("ended", function(){

exportRoot.gotoAndStop(1);
});
}, 1000); // in some cases this delay may be set to a higher value, like 100, 300...
// !!!!that delay at 1000 returns it back to frame zero!!!!!

}

this.EventSurround1 = true;

this.play();

}

in frame 1 add your buttons and have their layer(s) extend no further than frame 1 (or put empty keyframes in their layer(s) in frame 2).  add to frame 1:

this.stop();
this.High_btn.addEventListener("click", High.bind(this));
this.Low_btn.addEventListener("click", Low.bind(this));
this.Dont_btn.addEventListener("click", Dont.bind(this));
this.Know_btn.addEventListener("click", Know.bind(this));

function High() {this.gotoAndPlay(2);

}

function Low() {
this.gotoAndPlay(3);

}

function Dont() {
this.gotoAndPlay(4);

}

function Know() {
this.gotoAndPlay(5);

}

[oblong1]

Thanks KGlad

I just had a question. When you wrote "add your code keyframes to assign the src of the video to your code layer at frames 2,3,4,5 (NOT frame 1 with the buttons or correct your code for the High button)."

I am not sure what that means - because surely I have to add a video component for each of those sources. So there would be two video component layers. The uninterrupted one - and these ones on frames 2,3,4,5

One thing is for certain - I am getting better results having a video component that stretches over many frames.

[kglad · Accepted solution]

no, add one video component in frame 0 (eg, with instance name v).  hide it using:

$("#v")[0].style.visibility = "hidden";  // on frame 0 and 1

on the frames where you want the videos to play, use:

$("#v")[0].style.visibility = "visible";

$("#v")[0].src=whatever;   // where whatever is the video path/name you want to play on this frame

$("#v")[0].play();  // if you want v to autoplay

[oblong1]

Awesome! Thanks Kglad!

Now I am onto the next mystery - why doesn't it play on safari iphone browser ( no doubt the autoplay)

[kglad]

you need to prompt the user to click you app.