Skip to main content
aldor10080202
Participating Frequently
August 25, 2018
Answered

HTML5 canvas - Mpeg play/pause button

  • August 25, 2018
  • 1 reply
  • 588 views

Hi everyone,

I've inserted a video component in my HTML5 canvas.

Now, I want to automatically pause the video before it ends.

Moreover I'd like to add a button in order to make it play from that point onwards.

Unfortunately actions like this.play() and this.stop() do not work.

There should be some tricky code that allows to control the video player.

How is this possible?

Thank you in advance

This topic has been closed for replies.
Correct answer ClayUUID

Sorry, there's no tricky code, just very simple code:

document.getElementById("myvideo").pause();

document.getElementById("myvideo").play();

HTMLMediaElement - Web APIs | MDN

1 reply

ClayUUIDCorrect answer
Legend
August 26, 2018

Sorry, there's no tricky code, just very simple code:

document.getElementById("myvideo").pause();

document.getElementById("myvideo").play();

HTMLMediaElement - Web APIs | MDN

boyjim
Participating Frequently
November 8, 2021

hi

I tested this using a button called 'stopvideo' created in my HTML file that does works perfectly:

$("#stopvideo").click(function(){
document.getElementById("JimVideo").pause();
});
 
I have used this external Javascript in my HTML document which also works :
var aud = document.getElementById('JimVideo');
var approxTime = 0
aud.ontimeupdate = function(){
    var currentTime = Math.floor(aud.currentTime);
    if (currentTime !== approxTime) {
        approxTime = currentTime;
        if (approxTime === 4) {
document.getElementById("JimVideo").pause();
        }
    }
};
 
However I am at a loss on how to implement the 'get currentTime function' in order to automatically have the video stop (say after 4 seconds) BUT from within the Adobe animate canvas say on the initial keyframe where the video component exist. Any suggestions on how to figure this out. Thanks