HTML5 Video Stop onClose

Question

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.

Answer 1

The problem may be with jquery selector you've chosen $("video") is not a selector
The right selector may be putting an id element for video tag i.e.
Let's say your video element looks like this

<video id="vid1" width="480" height="267" oster="example.jpg" durationHint="33"> 
    <source src="video1.ogv" /> 
    <source src="video2.ogv" /> 
</video> 

Then you can select it via $("#vid1") with hash mark (#), id selector in jquery. If a video element is exposed in function,then you have access to HtmlVideoElement (HtmlMediaElement).This elements has control over video element,in your case you can use pause() method for your video element.

Check reference for VideoElement here
Also check that there is a fallback reference here

Best Regards
Myra

Answer 2

My experience with Firefox is that adding the 'id' attribute to avideo 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.