JavaScript'i gizleyin/gösterin - YouTube iframe video oynatmayı durdurun

Question

Videoları gömmek için iframe işlevini kullandım ve içerik ve videoları JavaScript aracılığıyla gizliyorum/gösteriyorum.

tek sorunum var. İlk videoda oynatma düğmesine bastığımda ve ilkini durdurmadan bir sonraki düğmeye tıkladığımda, ilk önce sadece oynamaya devam ediyor.

Videoyu yeni içerik gösterirken "arka planda" durdurmak için ne yapabilirim? Ben sadece "pic1" ve "pic2" id div id olan bu basit bir JavaScript işlevi, kullanıyorum

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

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

video yerleştirilmiştir.

Sadece görünüyor olamaz çalışmasını sağlamak için. Kaldırmaya çalıştım ama sonra istersen videoyu tekrar göremezsin.

Answer 1

Bu, ek dosyalar yüklenmeden YouTube player API'nin bir uygulamasıdır. Bu işi elde etmek için, ?enablejsapi=1 ile 'un src özniteliğini tamamlamanız gerekir.

<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 kodu:

Örnek (I, güvenle linebreaks atlayabilirsiniz okunabilmesi için birkaç satır üzerinde kod kırdı)

$(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]); 
     } 
    }); 
}); 

Video kazandı [ait