Скрыть/показать в JavaScript - остановить воспроизведение YouTube iframe video

Question

Я использовал функцию iframe для встраивания видео, и я скрываю/показываю контент и видео через JavaScript.

У меня есть проблема. Когда я нажимаю воспроизведение на первом видео, а затем нажимаю на следующий, не останавливая первый, первый продолжает играть.

Что можно сделать, чтобы остановить видео в «фоновом режиме» при показе нового контента?

$(function(){ 
    $("#link1").click(show1); 
}); 

function show1(){ 
    $("#pic1").fadeIn(); 
    $("#pic2").hide(); 
} 

Я просто использую эту простую функцию JavaScript, где «pic1» и «pic2» идентификатор идентификатор DIV, видео встроены в систему.

Я просто не могу показаться

чтобы он работал. Я попытался удалить, но потом вы не сможете увидеть видео снова, если хотите.

Answer 1

Это реализация API-интерфейса проигрывателя YouTube без загрузки дополнительных файлов. Чтобы получить эту работу, вы должны суффиксом всего вашего с атрибутом src с ?enablejsapi=1.

Пример (я сломал код через несколько строк для удобства чтения, можно смело опустить переносы строк):

<div id="pic3"> 
    <iframe width="640" height="390" 
      src="http://www.youtube.com/embed/Xub4grFLbQM?enablejsapi=1" 
      frameborder="0" allowfullscreen></iframe> 
</div> 

<div id="tS2" class="jThumbnailScroller"> 
.. Removed your code for readability.... 
    <a href="#vid3" id="link3"><img src="images/thumbs/player2.jpg" height="85"/></a> 
    .... 

JavaScript + Jquery код:

$(function() { 
    /* elt: Optionally, a HTMLIFrameElement. This frame's video will be played, 
    *  if possible. Other videos will be paused*/ 
    function playVideoAndPauseOthers(frame) { 
     $('iframe[src*="http://www.youtube.com/embed/"]').each(function(i) { 
      var func = this === frame ? 'playVideo' : 'pauseVideo'; 
      this.contentWindow.postMessage('{"event":"command","func":"' + func + '","args":""}', '*'); 
     }); 
    } 
    $('#tS2 a[href^="#vid"]').click(function() { 
     var frameId = /#vid(\d+)/.exec($(this).attr('href')); 
     if (frameId !== null) { 
      frameId = frameId[1]; // Get frameId 
      playVideoAndPauseOthers($('#pic' + frameId + ' iframe')[0]); 
     } 
    }); 
});