如何暂停或停止音频和/或视频 onPageChange答案

【问题标题】：How to Pause or Stop Audio &/or Video onPageChange如何暂停或停止音频和/或视频 onPageChange
【发布时间】：2019-12-04 04:14:08
【问题描述】：

我还是 Javascript 的新手，所以请善待。我的 html 中有几个单独的页面。导航有 6 个链接（主页、音乐、关于、演出、歌词、联系方式。导航主页嵌入了 youtube 视频。还有一个导航音乐页面，其中包含 5 张专辑/CD，每张都有自己的播放列表/音频播放器。页面更改时如何停止播放视频和/或音频？

$(document).ready(function() {
  $('#home').load('home.html');
  $('#music').load('player.html');
  $('#about').load('about.html');
  $('#gigs').load('gigs.html');
  $('#contact').load('contact.html');
});

<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>6-24_jj 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/ScMzIvxBSi4?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
</body>
</html>

【问题讨论】：

您想在所有页面上显示 YouTube iframe？如果没有，为什么不直接从 DOM 中删除它呢？我不清楚您显示的两个页面是如何交互的。
一页是有youtube视频的主页，另一页是有音频的音乐页。如果视频正在主页上播放，然后单击导航>音乐，则视频不会停止，除非在 youtube 视频本身上单击停止。如果用户点击不同的导航页面（即..home、音乐、关于等），我试图让视频和/或音频停止
那为什么不直接将内容加载到同一个地方呢？为什么要为家庭和音乐设置单独的 div？
主页内容会随着时间的推移而改变，而音乐（专辑）页面永远不会改变。这就是为什么会有不同的页面。
那么，您想一直显示音乐部分，但又想在页面更改时停止播放？

标签： javascript html html5-video html5-audio

【解决方案1】：

您可以使用暂停音频或视频。暂停（）并播放音频或视频 .play()

【讨论】：