Javascript to stop HTML5 video playback on modal window close
JavascriptModal DialogHtml5 VideoJavascript Problem Overview
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:
<!DOCTYPE html >
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Modal Test</title>
<script type="text/javascript" src="jquery.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#showSimpleModal").click(function() {
$("div#simpleModal").addClass("show");
return false;
});
$("#closeSimple").click(function() {
$("div#simpleModal").removeClass("show");
return false;
});
});
</script>
<style type="text/css">
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;
}
</style>
</head>
<body>
<a href="" id="showSimpleModal">Show Modal</a>
<div id="simpleModal" class="modal">
<video width="320" height="240" src="Davis_5109iPadFig3.m4v" controls="controls"> </video>
<a href="" id="closeSimple">Close</a>
</div>
</body>
</html>
Any input greatly appreciated.
Thanks.
Javascript Solutions
Solution 1 - Javascript
I'm using the following trick to stop HTML5 video. pause() the video on modal close and set currentTime = 0;
<script>
var video = document.getElementById("myVideoPlayer");
function stopVideo(){
video.pause();
video.currentTime = 0;
}
</script>
Now you can use stopVideo() method to stop HTML5 video. Like,
$("#stop").on('click', function(){
stopVideo();
});
Solution 2 - Javascript
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');
});
Solution 3 - Javascript
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();
Solution 4 - Javascript
When you close the video you just need to pause it.
$("#closeSimple").click(function() {
$("div#simpleModal").removeClass("show");
$("#videoContainer")[0].pause();
return false;
});
<video id="videoContainer" width="320" height="240" src="Davis_5109iPadFig3.m4v" controls="controls"> </video>
Also, for reference, here's the Opera documentation for scripting video controls.
Solution 5 - Javascript
The right answer is : $("#videoContainer")[0].pause();
Solution 6 - Javascript
Have a try:
function stop(){
var video = document.getElementById("video");
video.load();
}
Solution 7 - Javascript
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;
});
});
Solution 8 - Javascript
For anyone struggling with this issue with videos embedded using the <object> 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 < videos.length; i++)
{
if (videos[i].Stop) { videos[i].Stop(); }
}
Note the non-standard capital "S" on Stop();
Solution 9 - Javascript
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();
});
});
Solution 10 - Javascript
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;
});
Solution 11 - Javascript
// modal