Javascript to stop HTML5 video playback on modal window close

Question

I ve got a html5 video element on a modal window   When I close the window the video continues to play   I m a total newbie to JS   Is there an easy way to tie a video playback stop function to the window close button   Below is my html page    lt  DOCTYPE html  gt   lt html lang  en  gt    lt head gt   lt meta charset  utf-8    gt   lt title gt Modal Test lt  title gt    lt script type  text javascript  src  jquery js  gt    lt  script gt    lt script type  text javascript  gt        document  ready function                showSimpleModal   click function                    div simpleModal   addClass  show                return false                              closeSimple   click function                    div simpleModal   removeClass  show                return false                                          lt  script gt    lt style type  text css  gt   div simpleModal       position absolute       top  40px       width  320px       left  170px       border  solid 1px  bbb           padding  20px       background   fff       -webkit-box-shadow  0px 3px 6px rgba 0 0 0 0 25        opacity  0 0       -webkit-transition  opacity 0 0s ease-out  z-index  0     div simpleModal show       opacity  1 0       z-index  100              -webkit-transition-duration  0 25s       lt  style gt   lt  head gt   lt body gt    lt a href    id  showSimpleModal  gt Show Modal lt  a gt    lt div id  simpleModal  class  modal  gt   lt video width  320   height  240  src  Davis 5109iPadFig3 m4v  controls  controls  gt   lt  video gt   lt a href    id  closeSimple  gt Close lt  a gt   lt  div gt   lt  body gt   lt  html gt    Any input greatly appreciated   Thanks

User · Answer

Have a try    x000D   x000D  function stop    x000D      var video   document getElementById  video    x000D      video load    x000D    x000D   x000D   x000D

User · Answer

I m using the following trick to stop HTML5 video  pause   the video on modal close and set currentTime   0    lt script gt       var video   document getElementById  myVideoPlayer         function stopVideo              video pause              video currentTime   0          lt  script gt    Now you can use stopVideo   method to stop HTML5 video  Like       stop   on  click   function        stopVideo

User · Answer

I m not sure whether ZohoGorganzola s solution is correct  however  you may want to try getting at the element directly rather than trying to invoke a method on the jQuery collection  so instead of       videoContainer   pause      try       videoContainer   0  pause

User · Answer

I managed to stop the video using  get 0    Retrieve the DOM elements matched by the jQuery object        closeSimple   click function            div simpleModal   removeClass  show            videoContainer   get 0  pause        return false

User · Answer

None of these worked for me using 4 1 video js CDN   This code kills the video playing in a modal when the   closemodal  is clicked   I had 3 videos   Someone else can refactor    var myPlayer   videojs  my video 1    var myPlayer2   videojs  my video 2    var myPlayer3   videojs  my video 3        closemodal   click function       myPlayer pause    myPlayer2 pause    myPlayer3 pause              as per their Api docs

User · Answer

Try this     document  ready function            showSimpleModal   click function                div simpleModal   addClass  show                videoContainer   0  play            return false                      closeSimple   click function                div simpleModal   removeClass  show                videoContainer   0  pause            return false

User · Answer

When you close the video you just need to pause it     quot  closeSimple quot   click function            quot div simpleModal quot   removeClass  quot show quot           quot  videoContainer quot   0  pause        return false                           lt video id  quot videoContainer quot  width  quot 320 quot  height  quot 240 quot  src  quot Davis 5109iPadFig3 m4v quot  controls  quot controls quot  gt   lt  video gt   Also  for reference  here s the Opera documentation for scripting video controls

User · Answer

I searched all over the internet for an answer for this question  none worked for me except this code  Guaranteed  It work perfectly      body   on  hidden bs modal     modal   function         video   trigger  pause

User · Answer

The right answer is       videoContainer   0  pause

User · Answer

For anyone struggling with this issue with videos embedded using the  lt object gt  tag  the function you want is Quicktime s element Stop    For example  to stop any and all playing movies  use   var videos      object     for  var i 0  i  lt  videos length  i          if  videos i  Stop    videos i  Stop          Note the non-standard capital  S  on Stop

[javascript] Javascript to stop HTML5 video playback on modal window close

Examples related to javascript

Examples related to html5-video

[javascript] Javascript to stop HTML5 video playback on modal window close

Examples related to javascript

Examples related to modal-dialog

Examples related to html5-video