关闭全部模式后，视频的音频继续播放 [英] 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');

，并且html中没有关闭按钮可将任何脚本附加到该按钮.但是，我不知道jquery或javascript，所以我希望有人可以提供帮助.

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.

以下是我插入的HTML代码:

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>

您可以在此处查看此操作: http://www.endeavourtsa.org/index-test3.html 显然有css和js文件，但是由于我不知道需要哪一部分，因此除非希望，否则我不想在此处发布所有代码.如果需要，我可以发帖，也可以在这里找到文件: http://www.endeavourtsa.org/modal.zip

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

任何帮助将不胜感激！

推荐答案

在查看源代码之后，您需要在弹出窗口中向视频添加视频ID，以便以后引用( id ="evideo" )

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>',

，然后将onclick处理程序添加到关闭弹出窗口的按钮上(除非 rplm 具有事件处理模型，该事件处理模型使您可以更轻松地将代码附加到 close 弹出事件):

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>

(可能需要一些调整和其他事件，因为也可以通过在框外单击来取消模态，但是需要查看 rplm 文档以查看是否有更优雅的解决方案)

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

这篇关于关闭全部模式后，视频的音频继续播放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！