Video's audio continues to play after replete modal is closed

问题

Tried to find a solution for this, but couldn't find anything that worked. I tried

$('video').trigger('pause');

and there is no close button in the html to attach any script to. However, I do not know jquery or javascript so I am hoping someone can help.

Using 'Replete Modal' which seems to be quite popular but I am having an issue with the video's audio track carries on playing if the modal is closed before watching in full. Seems only to be an issue when viewed on desktop browsers.

Was hoping to find a solution that stops the audio as well.

The below is the HTML code I have inserted:

<div style="margin:50 auto; width:700px;">
		<a class="vimeo" >vimeo</a>
		<script>
			$(window).load( function(){
				rplm({
					title: "ETSA Teacher Training",
					text: '<video width="100%" height="338" controls autoplay><source src="Endeavour Teaching.mp4" type="video/mp4"><!--source src="movie.ogg" type="video/ogg"-->Your browser does not support the video tag.</video>',
					html: true,
					showConfirmButton: true,
					delay: 2,
					animation: 'fadeIn',
					allowOutsideClick: true,
					overlay: "black",
					videoHeight: "338",
					videoWidth: "100%",
		preventDialog: true,
		cookieName: "blockModal",
		preventText: "Block This Pop-up.",
		preventDays: 30,
		modalNOverlay: 'black',
				});
			});
		</script>
	</div>

You can see this in action here: http://www.endeavourtsa.org/index-test3.html Obviously there are css and js files, but as I do no know what portion is needed I did not want to post all of the code here unless I had to. I can post if requested or you can find the files here: http://www.endeavourtsa.org/modal.zip

Any help is greatly appreciated!

回答1:

having a look at the source, you'll need to add a video id to the video in the pop-up so you can reference it later (id="evideo")

rplm({
    title: "ETSA Teacher Training",
    text: '<video id="evideo" width="100%" height="338" controls autoplay><source src="Endeavour Teaching.mp4" type="video/mp4"><!--source src="movie.ogg" type="video/ogg"-->Your browser does not support the video tag.</video>',

and then add an onclick handler to the button that closes the pop-up (unless rplm has an eventing model that allows you to more easily attach code to the close event for the popup):

        modalNOverlay: 'black',
        });
        document.getElementsByClassName("confirm")[0].addEventListener("click",function(){alert('boo')})
    });
</script>

(may need some tweaking and additional events as the modal can also be dismissed by clicking outside the box, but would need to see the rplm documentation to see if there's a more elegant solution)

来源：https://stackoverflow.com/questions/52463146/videos-audio-continues-to-play-after-replete-modal-is-closed