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:

<!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.

score 70 · Answer 1 · answered Nov 15 '13 at 16:30

70

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();
});

answered Nov 15 '13 at 16:30

way2vin

2,411
1
20
15

This is the correct answer. The other answers pause the playback rather than stopping it. Thank you! – Sprachprofi Dec 10 '13 at 10:48
I tried this but it didn't work for me. It looks correct, but it wouldn't pause or stop the videos. – RolandiXor Aug 06 '16 at 19:27
@RolandiXor can you show us your code snippet ? By the phrase " it wouldn't pause or stop the videos" it looks like you have multiple videos. If you accidentally gave same id's for all video tag you may not get desired functionalities. – way2vin Aug 07 '16 at 10:42
@way2vin I used different ids but this method didn't work. The one above yours did. BTW does your method require jquery? I ask because I notice you are using "$". – RolandiXor Aug 10 '16 at 14:17
@RolandiXor yes, in my example I have used jquery. It not important u can use pure javascript for the purpose. – way2vin Aug 17 '16 at 06:39
For those using jQuery, please take note of Simon's answer below: use `[0].pause()` to reference the video element. – Alex Jan 06 '23 at 18:23

score 58 · Answer 2 · answered Mar 03 '14 at 20:31

58

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');
});

answered Mar 03 '14 at 20:31

user3376436

721
6
4

1

$('video').trigger('pause'); is the way I went! Worked perfectly! – Paul Apr 15 '15 at 20:55
This is the one that did the trick for me, but I believe it may require jquery (which I'm using because of bootstrap), so you may want to mention that. – RolandiXor Aug 06 '16 at 20:45
1

if you use `$('video').get(0).load();` it stops playback too and works just fine – Muhammad Omer Aslam Dec 07 '17 at 11:51
Thanks a lot, this is the only solution.. – Ajmal PraveeN Sep 16 '21 at 22:12
Thanks a lot. This is very helpful :) – Rayees AC Jan 19 '22 at 06:31

score 38 · Answer 3 · answered Apr 16 '12 at 12:56

38

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();

answered Apr 16 '12 at 12:56

Simon

1,630
1
17
23

1

Thanks It helped me . the second one worked for me. [0] was the essential part of method :))) – mAc Dec 07 '12 at 06:13
For anyone finds their way here, this works in code, but for some reason it doesn't in the console (at least not from Chrome). If you get an error while testing, try it anyway in your actual code, it should work. – dev404 May 10 '20 at 13:57

Tom Chandler · Answer 4 · 2020-07-13T13:18:23.777

10

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.

edited Jul 13 '20 at 13:18

answered May 11 '11 at 01:20

Tom Chandler

642
3
9

score 6 · Answer 5 · edited Oct 03 '12 at 07:51

6

The right answer is : $("#videoContainer")[0].pause();

edited Oct 03 '12 at 07:51

Stephan

41,764
65
238
329

answered Aug 23 '12 at 08:56

Yana Lazer

61
1
3

have you tested this on an iPad. Seems like when you pop the modal back up, the video does not seem to load again. – ClosDesign Sep 27 '12 at 17:22
Okk this solution Works.. make sure to put [0] in the method.. else it wont stop the Video. Thanks – mAc Dec 07 '12 at 06:13
@Carlos did you find the solution for your comment? I'm getting the same error – climboid May 02 '14 at 10:23
@climboid, we actually had to go with a different solution (VideoJS) because of this issue. There may be better support now for HTML5 video and Modal, thought if it still happening, probably not. – ClosDesign May 05 '14 at 14:07
@climboid, My solution is on JS fiddle for the Video JS and iPad solution. http://jsfiddle.net/UGS2U/1/ – ClosDesign May 05 '14 at 14:23
Thanks @Carlos, I ended up pausing the video and then closing the modal. I believe I need more video formats to solve my case but for the question answered that worked nice. – climboid May 05 '14 at 18:00

score 5 · Answer 6 · edited Feb 15 '16 at 12:02

5

Have a try:

function stop(){
    var video = document.getElementById("video");
    video.load();
}

edited Feb 15 '16 at 12:02

Alfred Huang

17,654
32
118
189

answered Feb 15 '16 at 10:28

Guilherme Ferreira

49
1
1

3

Why should the OP use this code? Could you expand you answer with an explanation? – Zippy Feb 15 '16 at 10:33
1

From google dev: "Note: Calling video.pause() isn't the only way to interrupt a video. You can entirely reset the video playback state, including the buffer, with video.load() and video.src..." (https://developers.google.com/web/updates/2017/06/play-request-was-interrupted) – Jeff Clayton Jan 03 '19 at 21:07

score 1 · Answer 7 · answered Aug 15 '13 at 04:11

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;                   
    });
});

Alan Bellows · Answer 8 · 2014-02-18T17:41:13.497

1

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();

edited Feb 18 '14 at 17:41

answered Feb 17 '14 at 23:38

Alan Bellows

1,781
1
14
21

score 0 · Answer 9 · answered Jul 31 '13 at 18:15

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.

score 0 · Answer 10 · answered Oct 17 '19 at 14:16

0

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;
});

answered Oct 17 '19 at 14:16

rosap

111
2

score 0 · Answer 11 · answered Aug 27 '23 at 19:32

0

When you play streaming video with webRtc you must delete the tracks from de the stream and set src Object to null.

answered Aug 27 '23 at 19:32

Herman Van Der Blom

718
9
20

블루코너 · Answer 12 · 2022-02-26T17:14:04.643

-1

// modal <div id='image-modal' ....> youtube player //or // modal <div id='image-modal' ....> video player

$('#image-modal').on('hidden.bs.modal', function () {
    $("#image-modal iframe").attr("src", $("#image-modal iframe").attr("src"));
    $("#image-modal video").attr("src", $("#image-modal video").attr("src"));
});

edited Feb 26 '22 at 17:14

answered Feb 26 '22 at 17:05

블루코너

1
1

This answer doesn't seem to address anything from the question, and isn't clear what it's trying to communicate in general. What's the intention? What is the snippet supposed to do? Why and how is it relevant to the question? – Bumhan Yu Feb 27 '22 at 03:50
There definitely has got to be a better solution. – Azamat Aug 15 '22 at 06:55

Javascript to stop HTML5 video playback on modal window close

12 Answers12

Linked

Related