Question

以下是完整的测试代码。该示例正在运行 typedef

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

有解决方案吗？ 10x

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>

Answer 1

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

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

Bootstrap Modal在Firefox中关闭视频窗口后继续播放音频

1 个答案: