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

New Here ,
Jun 04, 2021 Jun 04, 2021

Copy link to clipboard

Copied

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.

 

Views

212

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

Adobe Community Professional , Jun 06, 2021 Jun 06, 2021
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

Likes

Translate

Translate
Adobe Community Professional ,
Jun 05, 2021 Jun 05, 2021

Copy link to clipboard

Copied

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);

}

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 ,
Jun 06, 2021 Jun 06, 2021

Copy link to clipboard

Copied

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.

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
Adobe Community Professional ,
Jun 06, 2021 Jun 06, 2021

Copy link to clipboard

Copied

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

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 ,
Jun 13, 2021 Jun 13, 2021

Copy link to clipboard

Copied

Awesome! Thanks Kglad!

 

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

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
Adobe Community Professional ,
Jun 13, 2021 Jun 13, 2021

Copy link to clipboard

Copied

LATEST

you need to prompt the user to click you app.

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