Question

我在学院创建了一个简单的滑块四，我不能让视频在它们之间切换时暂停。有谁知道我做错了什么？当您点击相同或其他视频缩略图时，目标是让当前播放的视频停止播放。

我已经研究过使用youtube API，但每个示例似乎都使用click事件作为触发器，当我将该代码添加到现有的click事件时，似乎没有任何内容可以解决暂停视频的问题。

<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
}

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

1 个答案: