Best way to stop playing video when not displayed

1

I have a video control (media group) that I use to play videos. This div is only displayed when I’m playing a video. There is no “x” button to get out, so to speak - many events can cause the video control to no longer be displayed. When the user navigates away from the div via one of these many ways, the div is made invisible (display:none). I want to detect the video control is not displayed in an On event that when it happens, the event would stop the playing video. It’s disconcerting for the video to continue playing after you moved on.

My solution was upon displaying and starting the video was to give the video control focus via focus(). Then I setup an event onfocusout() on the video control which provides the hook to stop the video.

Is there a better way. As if the user presses something else on the screen and it gets focus, the video will stop playing.

2

Did you try putting the video in a popup where any click/touch outside of the popup closes the popup and stops the play?

3

Yes, that works great, especially inside of a modal. But, that has an X and placing the video.pause() in it is easy.

Look and feel has this video in a div that is displayed when needed.