Question

我的html中有几个单独的页面。导航首页嵌入了youtube vid。还有一个导航音乐页面，其中包含5张专辑/ cd，每张专辑/ cd都有其自己的播放列表/音频播放器。页面更改时如何停止播放视频和/或音频？导航具有6个链接（家庭，音乐，关于，演出，歌词，联系方式。

$(document).ready(function () {
		$('#home').load('home.html');
		$('#music').load('player.html');
		$('#about').load('about.html');
		$('#gigs').load('gigs.html');
		$('#contact').load('contact.html'); 
 })
 
 $('.menu a').on('click', function() {
 
$('#utube')[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*'); 
});

<nav>
	  <div class="hambtn" onclick="openNav()">&#9776;</div>
		<div id="sidenav" class="menu">
			<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
			<a href="#home">home</a>
			<a href="#music">music</a>
			<a href="#about">about</a>
			<a href="#gigs">gigs</a>
			<a href="#contact"><span>contact</span></a>
		</div>
</nav>
<section>
	<article>
		<div id="home"></div>
		<div id="music"></div>
	</article>
</section>

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>utube responsive</title>
<style type="text/css">
#utube{
	margin:0 auto;
	width:80%;
	height:auto;
}
.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}
</style>
</head>

<body>
<div id="utube" class="video-responsive"><iframe width="560" height="315" src="https://www.youtube.com/embed/5Q-8kRVjAe8?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
</body>
</html>

页面上的HTML5音频和视频暂停功能更改

0 个答案: