Ẩn/hiện trong JavaScript - ngừng phát video iframe trên YouTube

Question

Tôi đã sử dụng chức năng iframe để nhúng video và tôi đang ẩn/hiển thị nội dung và video thông qua JavaScript.

Tôi có một sự cố. Khi tôi bấm phát trên video đầu tiên, sau đó nhấp vào video tiếp theo mà không dừng video đầu tiên, video đầu tiên chỉ tiếp tục phát.

Tôi có thể làm gì để dừng video trong "nền", khi hiển thị nội dung mới?

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

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

Tôi chỉ sử dụng chức năng này hoạt Javascript đơn giản, nơi mà các "pic1" và "pic2" id là id của div, các video được nhúng vào trong.

Tôi chỉ có thể không có vẻ Để làm cho nó hoạt động. Tôi đã cố gắng loại bỏ, nhưng sau đó bạn không thể nhìn thấy video một lần nữa nếu bạn muốn.

Answer 1

Đây là triển khai API trình phát YouTube mà không tải thêm tệp. Để có được tác phẩm này, bạn phải hậu tố tất cả thuộc tính src của với ?enablejsapi=1.

Ví dụ (Tôi đã phá vỡ các mã trên một vài dòng cho dễ đọc, bạn có thể yên tâm bỏ qua linebreaks): Mã

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