Video continue playing even after closing popup

1

I have a page which contains videos thumbnails, on clicking the thumbnail it opens a popup which shows the specific video. Once i click on the play button it starts playing the video but on closing the popup the video is still playing in the background. How can i stop the video on closing the popup.
Each popup has a unique id but same popup class.
i tried the below code but it does not work.
app.on(‘popupClose’, function (popup) {
// do something on popup open
app.dialog.alert(‘Popup closed!’);
this.popup.destroy();
});
it closing popup it shows the dialog alert but video is still playing in background until i switch on another page.

2

Why should it be stopped? You should do it on popup close, you need to call .pause() method on HTML5 video element https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause

3

When i am using youtube embedded videos in popup, it works fine, the playback of youtube video is stopped automatically when popup is closed but in case of local mp4 videos files placced using html5 video tag, it keeps playing even after closing the popup.

4

i tried
app.on(‘popupClose’, function (popup) {
// do something on popup open
var video = document.getElementsByClassName(“video”);
video.pause();
});
getting the below error

TypeError: video.pause is not a function

Please help.

5 
document.getElementsByClassName(“video”);

will return all elements with that class name, you should specify the one you need.
lets assume you only have one video with class video =>

var video = document.getElementsByClassName('video')[0]
video.pause();
6

Thank you so much for the reply. Actually i have a list of videos with unique ids and on clicking the link it open the specific popup of that id and show the video.

Below is my code. Don’t know why code is not being displayed properly in forum. Your suggested solution is working fine for single video but not working if i have multiple videos. Is there a way i can pause video by video id? The problem is how can i get the video id of the opened popup. Every video has a unique id assigned which is dynamically generated. Example code given



title
title
title
7

i cant see your code, just use three of this chars this -> ` <- to wrap your code;
like:

  .```
    // your code HERE
    // do not add the dots . just the ticks the three `
  .```

you can get an id whith
let myElement = document.getElementById(‘my-unique-element-id’)

8

26%20PM
Screenshot 2019-10-31 at 8.49.26 PM.png1970×1808 493 KB

Code picture is attached. Above is the code of my template.

below is the code of my app.js file, which trigger the pause function on closing the popup.

45%20PM
Screenshot 2019-10-31 at 8.51.45 PM.png974×224 33 KB

how can i get the video id inside app.on('popupClose) function, so i can pause the video using the video id.

9

there are multiple ways to get your video element
i will use Dom7, for simplicity

var $$ = Dom7
app.on('popupClose', function (popup) {
   let myVideoOnPopup3 = $$('#pu3 video')
})

here you can read Dom7 doc
https://framework7.io/docs/dom7.html

just re-read you question, you need to make a generic fnc on popupClose?
if thats the case you can find video tag on the current popup closing

app.on('popupClose', function (popup) {
   let myVideo = popup.$el.find('video')
})
10

Finally solved the issue by exploring the popup object.

Here is my app.js code to pause the video

app.on(‘popupClose’, function (popup) {
var vid = ‘m’+popup.el.id;
let video = document.getElementById(vid);
video.pause();
});

Thank you so much for your help :slight_smile: