Question

我正在尝试并且几乎成功地仅使用一个开/关按钮播放Youtube视频中的声音。

除无法更改按钮应播放的歌曲外，其余所有功能都可以正常工作，工具提示和名称更改。

只有按钮2可以进行更改（按钮1），按钮3和4上没有JS，它们已被禁用。

这似乎是一个简单而直接的任务，但是经过一段时间的努力，我找不到任何解决方案。有人可以帮忙吗？

https://jsfiddle.net/RobDelp/a1r86qn9/9/>
歌曲1没有在JSFiddle中播放，不知道为什么，而在我的计算机上则可以正常播放

非常感谢。罗伯托。

// =========== TEST ============
// ============ CHANGE SONG #1
$(".change_song1").on("click", function(e) {
  var YT_link = document.getElementById("youtube-audio");
  YT_link.setAttribute("data-video", "PMhfT7XsDoU");

  var testos = "Charlie Parker - All the things you are";
  document.getElementById("song_name").innerHTML = testos;
});

//==========CHANGE SONG #2 VALUE
$(".change_song2").on("click", function(e) {
  var YT_link = document.getElementById("youtube-audio");
  YT_link.setAttribute("data-video", "K3L5lB8hwcM");

  var testos = "Charlie Parker - Anthropology";
  document.getElementById("song_name").innerHTML = testos;
});
// ========== END TEST

$(".change_song3").on("click", function(e) {
  var testos = "Charlie Parker - Bloomdido";
  document.getElementById("song_name").innerHTML = testos;
});
$(".change_song4").on("click", function(e) {
  var testos = "Charlie Parker - Donna Lee";
  document.getElementById("song_name").innerHTML = testos;
}); // =========== TEST ============

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- SONG ACTIVATORS -->
<script src="https://www.youtube.com/iframe_api"></script>
<script src="https://cdn.rawgit.com/labnol/files/master/yt.js"></script>

<h4> ... Charlie Parker songs</h4>
<div class='btn-group btn-group-justified down010'>
  <div class='btn-group' role='group'>
    <a class='change_song1 btn btn-sm btn-success tooltip_color' data-toggle='tooltip' title="Charlie Parker - All the things you are" data-placement='top'>SONG 1</a>
  </div>
  <div class='btn-group' role='group'>
    <a class='change_song2 btn btn-sm btn-success tooltip_color' data-toggle='tooltip' title="Charlie Parker - Anthropology" data-placement='top'>SONG 2</a>
  </div>

  <div class='btn-group' role='group'>
    <a class='change_song3 btn btn-sm btn-success tooltip_color' data-toggle='tooltip' title="DISABLED" data-placement='top'>SONG 3</a>
  </div>

  <div class='btn-group' role='group'>
    <a class='change_song4 btn btn-sm btn-success tooltip_color' data-toggle='tooltip' title="DISABLED" data-placement='top'>SONG 4</a>
  </div>
</div>

<div style='padding-top:20px;' data-video='PMhfT7XsDoU' data-autoplay='0' data-loop='1' id='youtube-audio'>
</div>

<h4 id='song_name'>Charlie Parker - All the things you are</h4>

如何仅用一个按钮播放一次多个Youtube视频声音

0 个答案: