javascript - Youtube 视频不会暂停，不知道为什么

Question

我在学院创建了一个简单的 slider 四，在它们之间切换时我无法让视频暂停。有谁知道我做错了什么？目标是在您单击相同或另一个视频的缩略图时停止任何当前正在播放的视频。

我已经研究过使用 youtube API，但是每个示例似乎都使用点击事件作为触发器，当我将该代码添加到现有的点击事件中时，似乎没有什么可以暂停视频。

<style>
        .video-slider-2, .video-slider-3, .video-slider-4 {display:none}
    </style>
    </headcode> <!-- before closing head tag -->
    <bodycode></bodycode>   <!-- after opening body tag -->
    <footcode>
    <script type="text/javascript">
function swapvid1() {
    document.getElementsByClassName('video-slider-1')[0].style.display = "inline";
    document.getElementsByClassName('video-slider-2')[0].style.display = "none";
    document.getElementsByClassName('video-slider-3')[0].style.display = "none";
    document.getElementsByClassName('video-slider-4')[0].style.display = "none";
    $('.youtube-iframe').each(function(index) {
        $(this).attr('src', $(this).attr('src'));
        return false;
    });
}
function swapvid2() {
    document.getElementsByClassName('video-slider-1')[0].style.display = "none";
    document.getElementsByClassName('video-slider-2')[0].style.display = "inline";
    document.getElementsByClassName('video-slider-3')[0].style.display = "none";
    document.getElementsByClassName('video-slider-4')[0].style.display = "none";
    $('.youtube-iframe').each(function(index) {
        $(this).attr('src', $(this).attr('src'));
        return false;
    });
}
function swapvid3() {
    document.getElementsByClassName('video-slider-1')[0].style.display = "none";
    document.getElementsByClassName('video-slider-2')[0].style.display = "none";
    document.getElementsByClassName('video-slider-3')[0].style.display = "inline";
    document.getElementsByClassName('video-slider-4')[0].style.display = "none";
    $('.youtube-iframe').each(function(index) {
        $(this).attr('src', $(this).attr('src'));
        return false;
    });
}
function swapvid4() {
    document.getElementsByClassName('video-slider-1')[0].style.display = "none";
    document.getElementsByClassName('video-slider-2')[0].style.display = "none";
    document.getElementsByClassName('video-slider-3')[0].style.display = "none";
    document.getElementsByClassName('video-slider-4')[0].style.display = "inline";
    $('.youtube-iframe').each(function(index) {
        $(this).attr('src', $(this).attr('src'));
        return false;
    });
}

document.getElementById('video-thumb-1').onclick = function () {
    swapvid1();
};
document.getElementById('video-thumb-2').onclick = function () {
    swapvid2();
};
document.getElementById('video-thumb-3').onclick = function () {
    swapvid3();
};
document.getElementById('video-thumb-4').onclick = function () {
    swapvid4();
};
</script>

<div class="video-slider-1">

</div>
<div class="video-slider-2">
    <iframe id="popup-youtube-player-1" width="560" height="315" src="https://www.youtube-nocookie.com/embed/ajEtUxjgXJk?rel=0" frameborder="0" allowfullscreen="true" allowscriptaccess="always"></iframe>
</div>
<div class="video-slider-3">
    <iframe id="popup-youtube-player-3" width="560" height="315" src="https://www.youtube-nocookie.com/embed/BYpsEdYNyB0?rel=0" frameborder="0" allowfullscreen="true" allowscriptaccess="always"></iframe>
</div>
<div class="video-slider-4">
    <iframe id="popup-youtube-player-4" width="560" height="315" src="https://www.youtube-nocookie.com/embed/xusKGsLyoNA?rel=0" frameborder="0" allowfullscreen="true" allowscriptaccess="always"></iframe>
</div>

<div class="video-slider-thumb-1">
    <div class="col-xs-3 col-sm-3 col-md-3">
        <a class="" id="video-thumb-1"><img class="responsive-image" src="{{f:10952848}}" alt="Promise for Today Video Thumbnail" /></a>
    </div>
</div>
<div class="video-slider-thumb-2">
    <div class="col-xs-3 col-sm-3 col-md-3">
        <a id="video-thumb-2"><img class="responsive-image" src="{{f:7618238}}" alt="Promise of Opportunity Video Thumbnail" /></a>
    </div>
</div>
<div class="video-slider-thumb-3">
    <div class="col-xs-3 col-sm-3 col-md-3">
        <a id="video-thumb-3"><img class="responsive-image" src="{{f:13134177}}" alt="Thank You Video Thumbnail" /></a>
    </div>
</div>
<div class="video-slider-thumb-4">
    <div class="col-xs-3 col-sm-3 col-md-3">    
        <a id="video-thumb-4"><img class="responsive-image" src="{{f:4121391}}" alt="Promise of Innovation and Partnership Video Thumbnail" /></a>
    </div>
</div>

Answer 1

您可以使用Youtube iframe API暂停视频。此外，您可以分解您的 id进入 class删除冗余:

查看this fiddle

HTML

<div class="video-slider">
  <iframe id="popup-youtube-player-1" width="560" height="315" src="https://www.youtube.com/embed/B_hLfhccYf0?rel=0&enablejsapi=1" frameborder="0" allowfullscreen="true" allowscriptaccess="always"></iframe>
</div>
<div class="video-slider">
  <iframe id="popup-youtube-player-2" width="560" height="315" src="https://www.youtube.com/embed/ajEtUxjgXJk?rel=0&enablejsapi=1" frameborder="0" allowfullscreen="true" allowscriptaccess="always"></iframe>
</div>
<div class="video-slider">
  <iframe id="popup-youtube-player-3" width="560" height="315" src="https://www.youtube.com/embed/BYpsEdYNyB0?rel=0&enablejsapi=1" frameborder="0" allowfullscreen="true" allowscriptaccess="always"></iframe>
</div>
<div class="video-slider">
  <iframe id="popup-youtube-player-4" width="560" height="315" src="https://www.youtube.com/embed/xusKGsLyoNA?rel=0&enablejsapi=1" frameborder="0" allowfullscreen="true" allowscriptaccess="always"></iframe>
</div>

<div>
  <div class="col-xs-3 col-sm-3 col-md-3">
    <a class="video-thumb" data-index="1"><img class="responsive-image" src="{{f:10952848}}" alt="Promise for Today Video Thumbnail" /></a>
  </div>
</div>
<div>
  <div class="col-xs-3 col-sm-3 col-md-3">
    <a class="video-thumb" data-index="2"><img class="responsive-image" src="{{f:7618238}}" alt="Promise of Opportunity Video Thumbnail" /></a>
  </div>
</div>
<div>
  <div class="col-xs-3 col-sm-3 col-md-3">
    <a class="video-thumb" data-index="3"><img class="responsive-image" src="{{f:13134177}}" alt="Thank You Video Thumbnail" /></a>
  </div>
</div>
<div>
  <div class="col-xs-3 col-sm-3 col-md-3">
    <a class="video-thumb" data-index="4"><img class="responsive-image" src="{{f:4121391}}" alt="Promise of Innovation and Partnership Video Thumbnail" /></a>
  </div>
</div>

Javascript

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var players = new Array();
var players_list = [
  "popup-youtube-player-1",
  "popup-youtube-player-2",
  "popup-youtube-player-3",
  "popup-youtube-player-4"
];

function onYouTubeIframeAPIReady() {
  for (item in players_list) {
    players[players_list[item]] = new YT.Player(players_list[item], {});
  }
}

function pauseVideo() {
  for (item in players_list) {
    players[players_list[item]].pauseVideo();
  }
}

function swapvid(id) {
  pauseVideo();
  $('.video-slider').css('display', 'none');
  $('#' + id).closest('.video-slider').css('display', 'inline');
}

$('.video-thumb').click(function() {
  swapvid('popup-youtube-player-' + $(this).attr('data-index'));
});

CSS

.video-slider {
  display: none
}