以下是完整的测试代码。该示例正在运行
http://public.eitan.ac.il/modal/modal-video.html

我正在尝试使用Modal在弹出窗口中运行youtube视频,但是在关闭窗口后,在Firefox中音频会继续播放。在Chrome浏览器中可以正常工作。

有什么办法吗? 10倍



var mobileDetect = new MobileDetect(window.navigator.userAgent);

/*
$(document).ready(function(){
	$("#myModal").on('hidden.bs.modal', function (e) { $("#myModal #iframeYoutube").attr("src", $("#myModal 		#iframeYoutube").attr("src"));

	});
*/

	$(document).ready(function(){
		$("#myModal").on("hidden.bs.modal",function()
			{ $("#iframeYoutube").attr("src","#");
		})
	})

	function changeVideo(vId){
		var iframe=document.getElementById("iframeYoutube");
		iframe.src="https://www.youtube.com/embed/"+vId+"?autoplay=1&modestbranding=1&rel=0&showinfo=0";


	if (mobileDetect.mobile()) {
		window.location = "https://www.youtube.com/watch?v=" + vId;
	return;
	  }

	   $("#myModal").modal("show");
	}

<!DOCTYPE html>
<html lang="en">

<head>
	<link type="text/css" rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
	<link type="text/css" rel="stylesheet" href="modal.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
	<script type='text/javascript'src='https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js'></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/mobile-detect/1.4.2/mobile-detect.min.js"></script>
</head>

<body>

<a href="javascript:changeVideo('e80BbX05D7Y')"><button class="main-btn">Watch</button></a>

<!-- Modal -->

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">

<div class="modal-header">
	<button type="button" class="close" data-dismiss="modal" aria-label="Close"><a href="#"><span aria-		hidden="true" style="color:white">&times;</span></a></button>
			      </div>

				<div class="modal-body">
					<iframe id="iframeYoutube" width="700" height="394" src="https://www.youtube.com/embed/e80BbX05D7Y" frameborder="0" allowfullscreen></iframe>
				</div>
			</div>
		</div>
	</div>

</body>

</html>

最佳答案

问题出在您的hidden.bs.modal函数中,将#替换为_blank

$(document).ready(function(){
    $("#myModal").on("hidden.bs.modal",function()
        { $("#iframeYoutube").attr("src","_blank");
    })
})

关于javascript - Bootstrap Modal在Firefox中关闭视频窗口后继续播放音频,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/52141283/

10-09 17:34
查看更多