video stop () by HTML5 canvas

Engaged ,
Mar 30, 2022 Mar 30, 2022

Copy link to clipboard

Copied

HTML5 canvas 

2022-03-30_11-52-10.jpg

When the video stops, I want to show the button

Why is the code not working?

 

use video component for play video

this.stop();

this.but1.visible = false;

this.vid1.on("added", function () {
	$("#vid1")[0].play();
	
	if (this.vid1.stop) {
		this.but1.visible = true;
	}
}, this, true);

 

TOPICS
Code , Timeline

Views

190

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

Engaged , Apr 06, 2022 Apr 06, 2022
this.stop();this.but1.visible = false; this.vid1.onadded = function () { $("#vid1")[0].play();};var video; function checkInitF() { video = document.querySelector("#vid1"); if (video) { video.addEventListener("ended", function () { videoEnded(); alert("good"); }); } else { video = $("#vid1")[0]; setTimeout(checkInitF, 100); } } checkInitF(); function videoEnded() { //this.but1.visible = true; exportRoot.but1.visible = true; }

Likes

Translate

Translate
Adobe Community Professional ,
Mar 30, 2022 Mar 30, 2022

Copy link to clipboard

Copied

Just to confirm, is your button instance name but1 ?

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 ,
Mar 30, 2022 Mar 30, 2022

Copy link to clipboard

Copied

It's not working because it's completely wrong. How would an if statement that runs once detect a video ending?

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ended_event

 

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
Engaged ,
Mar 30, 2022 Mar 30, 2022

Copy link to clipboard

Copied

@ClayUUID 

 

this.stop();

this.but1.visible = false;

 

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


this.vid1.addEventListener("ended", function () {
this.but1.visible = true;

});

Why is the code not working?

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 ,
Mar 31, 2022 Mar 31, 2022

Copy link to clipboard

Copied

Because, unless you bind it, "this" in event handlers points to the global window object.

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
Engaged ,
Apr 02, 2022 Apr 02, 2022

Copy link to clipboard

Copied

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
Engaged ,
Apr 03, 2022 Apr 03, 2022

Copy link to clipboard

Copied

@ClayUUID  @Joseph Labrecque @kglad   @JoãoCésar

quote

HTML5 canvas 

2022-03-30_11-52-10.jpg

When the video stops, I want to show the button

Why is the code not working?

 

use video component for play video

 

 

this.stop();

this.but1.visible = false;

this.vid1.on("added", function () {
$("#vid1")[0].play();
}, this, true);
////////////////
this.vid1.on("ended", function() {
alert("Video Finished");
});

////////////////

$("#vid1").on("loadedmetadata", function() {
alert("Video loaded");
this.currentTime = 10;
this.but1.visible = true;
});


$("#vid1").on("timeupdate", function() {
var cTime=this.currentTime;
if(cTime>0 && cTime % 2 == 0){ //Alerts every 2 minutes once
alert("Video played "+cTime+" minutes");

this.but1.visible = true;});

var perc=cTime * 100 /// this.duration;
if(perc % 10 == 0) {      //Alerts when every 10% watched
alert("Video played "+ perc +"%");

this.but1.visible = true;
}}

 

 

 



 

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
Engaged ,
Apr 05, 2022 Apr 05, 2022

Copy link to clipboard

Copied

upset-tears.gif

 

 

 

 

 

@ClayUUID  @Joseph Labrecque @kglad   @JoãoCésar

 

this.stop();

this.but1.visible = false;
this.vid1.onadded = function () {
$("#vid1")[0].play();
};

///////////////
var vid1 = document.getElementById("vid1");
this.vid1.onended = function () {
alert("The video has ended");
this.but1.visible = true;
};

 

???

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
Engaged ,
Apr 06, 2022 Apr 06, 2022

Copy link to clipboard

Copied

LATEST

this.stop();

this.but1.visible = false;
this.vid1.onadded = function () {
$("#vid1")[0].play();

};

var video;
function checkInitF() {
video = document.querySelector("#vid1");
if (video) {
video.addEventListener("ended", function () {
videoEnded();
alert("good");
});
} else {
video = $("#vid1")[0];
setTimeout(checkInitF, 100);
}
}
checkInitF();


function videoEnded() {
//this.but1.visible = true;
exportRoot.but1.visible = true;
}

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