So I'm having a little trouble with videos, i have a website and there i have the same video displayed in 3 different pages. The videos are all paused until the user clicks on them to start. The problem is when, i leave a page and the video is just there even if i have clicked on play or pause or haven't done anything at all, the other two, give me an error saying vid.pause is not a function.
This is the HTML part ->
<video id="{{vid?.id}}" src={{vid?.video}} onloadedmetadata="this.paused = true; this.currentTime = 1" (click)="playPause(vid)"> </video>
And the js ->
playPause(vid) {
var vid = (<HTMLMediaElement>document.getElementById(vid.id));
if (vid.paused == true) {
vid.play();
} else {
vid.pause();
vid.currentTime = 1;
}
}
The problem for me was that I tried pausing a jQuery object, but that's not possible. You need to pause a DOM element. So I corrected it by converting my jQuery object to a DOM element.
BEFORE:
$("#video").pause();
AFTER / SOLVED:
$("#video")[0].pause();
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With