Menu
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.
256
When using Bootstrap 3 modal windows normally the content is there, in the same window, so, whenever you close a modal, you just hide it within the same page. If it's a <video> , it'll keep playing until you refresh the page, or re-open the modal just to pause it (since it can't be stopped).
When you close the model, it does not call the player to stop playing the video. You can you add onclick="javascript::player. api('pause')" in your model close button. It should resolve your issue.
The pause() method halts (pauses) the currently playing audio or video.
To close a modal, add the w3-button class to an element together with an onclick attribute that points to the id of the modal (id01). You can also close it by clicking outside of the modal (see example below). Tip: × is the preferred HTML entity for close icons, rather than the letter "x".
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(); }); 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'); }); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
