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;
I suspect that the problem is an event listener remove situation, but everything I try does not work.
Would appreciate any help.
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
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);
}
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.
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
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)
Copy link to clipboard
Copied
you need to prompt the user to click you app.