Jquery 如何在播放下一个视频之前关闭上一个视频？

Question

我最近 2 天一直在处理这段代码。我尝试了很多解决方案，但我无法实现我想要的。

这是我的代码

<html>
<body>
<a href="#" onclick="myLink('0HTo_ySoct4');">Click me!</a>
<a href="#" onclick="myLink('PxWDfisVmzg');">Click me!</a>

<div id="0HTo_ySoct4">The text will get loaded here</div>
<div id="PxWDfisVmzg">The text will get loaded here</div>


<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
function myLink(Yt) {
var yout = Yt;
var myurl = '<iframe src="https://www.youtube.com/embed/' + yout + '?autoplay=1&rel=0&controls=1" width="450" height="300" frameborder="0" class="player"></iframe>';

$('.player').hide();

$("#"+yout).html(myurl);

}
</script>
</body>
</html>

让我解释一下我想要什么以及代码在做什么。

看，我有 2 个点击我的选项卡。我可以在 20 点左右点击我的标签，这取决于结果。

所有标签都包含一个 youtube 视频 ID。

所以当我点击任何点击我标签播放视频时。该视频将加载到他们的相关 div 中。这确实是。我想在每个视频的特定视频描述/详细信息下方加载它们。它的工作，但有一个错误。

错误是，当我试图点击第二个点击我标签时。第一个将从网页中隐藏，但视频仍会在后台播放，您将听到两个视频的音频。

我想在播放下一个视频之前完全关闭上一个视频。我做了很多更改，但没有得到修复，所以现在我几乎不需要你们这些专家的帮助。

请帮帮我

如何才能在播放下一个视频之前完全关闭所有上一个视频？只是因为 div id 不同，我遇到了这个问题，但我的项目中需要它。

提前致谢，

Answer 1

做这样的事情

<html>
<body>
<a href="#" onclick="myLink('0HTo_ySoct4');">Click me!</a>
<a href="#" onclick="myLink('PxWDfisVmzg');">Click me!</a>

<div class="youtubeVideo" id="0HTo_ySoct4">The text will get loaded here</div>
<div class="youtubeVideo" id="PxWDfisVmzg">The text will get loaded here</div>


<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
function myLink(Yt) {
var yout = Yt;
var myurl = '<iframe src="https://www.youtube.com/embed/' + yout + '?autoplay=1&rel=0&controls=1" width="450" height="300" frameborder="0" class="player"></iframe>';

$('.player').hide();
$(".youtubeVideo").empty();
$("#"+yout).html(myurl);

}
</script>
</body>
</html>

基本上清空显示视频的所有 divs，然后在相应的 div

中加载新视频

Jquery 如何在播放下一个视频之前关闭上一个视频？

Jquery how to close last video before streaming the next?

javascript

video

jquery

onclick

youtube-iframe-api