[jquery] HTML5 Video Stop onClose

I'm using jQuery tools for an overlay. Inside the overlay I have an HTML5 video. However, when I close the overlay, the video keeps playing. Any idea how I might get the video to stop when I close the overlay? Here's the code I have:

$("img[rel]").overlay({ onClose: function() { <stop the video somehow> }, mask: { color: '#000', opacity: 0.7 }});

I tried using

$('video').pause();

But this paused the overlay as well.

To save hours of coding time, use a jquery plug-in already optimized for embedded video iframes.

I spent a couple days trying to integrate Vimeo's moogaloop API with jquery tools unsuccessfully. See this list for a handful of easier options.

Try this:

if ($.browser.msie)
{
   // Some other solution as applies to whatever IE compatible video player used.
}
else
{
   $('video')[0].pause();
}

But, consider that $.browser is deprecated, but I haven't found a comparable solution.

If you want to stop every movie tag in your page from playing, this little snippet of jQuery will help you:

$("video").each(function () { this.pause() });

Someone already has the answer.

$('video') will return an array of video items. It is totally a valid seletor!

so

$("video").each(function () { this.pause() });

will work.

Starting Video with different browsers

For Opera 12

window.navigator.getUserMedia(param, function(stream) {
                            video.src =window.URL.createObjectURL(stream);
                        }, videoError );

For Firefox Nightly 18.0

window.navigator.mozGetUserMedia(param, function(stream) {
                            video.mozSrcObject = stream;
                        }, videoError );

For Chrome 22

window.navigator.webkitGetUserMedia(param, function(stream) {
                            video.src =window.webkitURL.createObjectURL(stream);
                        },  videoError );

Stopping video with different browsers

For Opera 12

video.pause();
video.src=null;

For Firefox Nightly 18.0

video.pause();
video.mozSrcObject=null;

For Chrome 22

video.pause();
video.src="";

My experience with Firefox is that adding the 'id' attribute to a video element causes Firefox to crash completely...as in asking you to submit a bug report. Remove the id element and it works fine. I am not sure if this is true for everyone, but I thought I'd share my experience in case it helps.

For a JQM+PhoneGap app the following worked for me.

The following was the minimum I had to go to get this to work. I was actually experiencing a stall due to the buffering while spawning ajax requests when the user pressed the back button. Pausing the video in Chrome and the Android browser kept it buffering. The non-async ajax request would get stuck waiting for the buffering to finish, which it never would.

Binding this to the beforepagehide event fixed it.

 $("#SOME_JQM_PAGE").live("pagebeforehide", function(event)
 {
           $("video").each(function () 
           { 
               logger.debug("PAUSE VIDEO");
               this.pause();
               this.src = "";
           });
 });

This will clear every video tag on the page.

The important part is this.src = "";

The following works for me:

$('video')[0].pause();