İframe'i gizlerken bir YouTube oynatıcısı nasıl duraklatılır?

İçinde bir YouTube videosu içeren gizli bir div var <iframe>. Kullanıcı bir bağlantıyı tıkladığında, bu div görünür hale gelir, kullanıcı daha sonra videoyu oynatabilmelidir.

Kullanıcı paneli kapattığında, video oynatmayı durdurmalıdır. Bunu nasıl başarabilirim?

Kod:

<!-- link to open popupVid -->
<p><a href="javascript:;" onClick="document.getElementById('popupVid').style.display='';">Click here</a> to see my presenting showreel, to give you an idea of my style - usually described as authoritative, affable and and engaging.</p>

<!-- popup and contents -->
<div id="popupVid" style="position:absolute;left:0px;top:87px;width:500px;background-color:#D05F27;height:auto;display:none;z-index:200;">

  <iframe width="500" height="315" src="http://www.youtube.com/embed/T39hYJAwR40" frameborder="0" allowfullscreen></iframe>

  <br /><br /> 
  <a href="javascript:;" onClick="document.getElementById('popupVid').style.display='none';">
  close
  </a>
</div><!--end of popupVid -->

Bu davranışı uygulamanın en kolay yolu , gerektiğinde pauseVideove playVideoyöntemlerini çağırmaktır . Önceki cevabımın sonucundan esinlenerek , istenen davranışı elde etmek için eklentisiz bir işlev yazdım.

Tek ayar:

• Bir fonksiyon ekledim, toggleVideo
• ?enablejsapi=1Özelliği etkinleştirmek için YouTube'un URL'sine ekledim

Demo: http://jsfiddle.net/ZcMkt/
Kod:

<script>
function toggleVideo(state) {
    // if state == 'hide', hide. Else: show video
    var div = document.getElementById("popupVid");
    var iframe = div.getElementsByTagName("iframe")[0].contentWindow;
    div.style.display = state == 'hide' ? 'none' : '';
    func = state == 'hide' ? 'pauseVideo' : 'playVideo';
    iframe.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');
}
</script>

<p><a href="javascript:;" onClick="toggleVideo();">Click here</a> to see my presenting showreel, to give you an idea of my style - usually described as authoritative, affable and and engaging.</p>

<!-- popup and contents -->
<div id="popupVid" style="position:absolute;left:0px;top:87px;width:500px;background-color:#D05F27;height:auto;display:none;z-index:200;">
   <iframe width="500" height="315" src="http://www.youtube.com/embed/T39hYJAwR40?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
   <br /><br />
   <a href="javascript:;" onClick="toggleVideo('hide');">close</a>

İşte bir jQuery, RobW'nin kalıcı bir pencerede bir iframe'i gizleme / duraklatma kullanımına ilişkin cevabını ele alıyor:

    function toggleVideo(state) {
        if(state == 'hide'){
            $('#video-div').modal('hide');
            document.getElementById('video-iframe'+id).contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
        }
        else {
            $('#video-div').modal('show');
            document.getElementById('video-iframe'+id).contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
        }
    }

Bahsedilen html öğeleri, göster / gizle yöntemlerini çağıran modal div'in kendisi (# video-div) ve src = "" gibi video url'sine ve enablejsapi = 1 sonekine sahip iframe'dir (# video-iframe) ? bu, oynatıcının programlı kontrolünü sağlar (ör.

Html hakkında daha fazla bilgi için RobW'un cevabına bakın.

RobW ve DrewT'nin yanıtlarına göre sayfadaki tüm videoları duraklatmak için basit bir jQuery pasajı:

jQuery("iframe").each(function() {
  jQuery(this)[0].contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*')
});

Hey kolay bir yol, videonun src'sini hiçbir şeye ayarlamaktır, böylece video gizlenirken kaybolur ve daha sonra, videoyu açan bağlantıya tıkladığınızda src'yi istediğiniz videoya geri ayarlar .. yapmak youtube iframe'ine bir id ayarlamak ve bu kimliği kullanarak src işlevini şu şekilde çağırmak:

<script type="text/javascript">
function deleteVideo()
{
document.getElementById('VideoPlayer').src='';
}

function LoadVideo()
{
document.getElementById('VideoPlayer').src='http://www.youtube.com/embed/WHAT,EVER,YOUTUBE,VIDEO,YOU,WHANT';
}
</script>

<body>

<p onclick="LoadVideo()">LOAD VIDEO</P>
<p onclick="deleteVideo()">CLOSE</P>

<iframe id="VideoPlayer" width="853" height="480" src="http://www.youtube.com/WHAT,EVER,YOUTUBE,VIDEO,YOU,HAVE" frameborder="0" allowfullscreen></iframe>

</boby>

Diğer yanıtlarda bahsedilen / komutlarını ?enablejsapi=truekullanmadan önce iframe'in src'sini ayarlamanız gerektiğinden , bunu Javascript aracılığıyla programlı olarak eklemek faydalı olabilir (özellikle bu davranışın başkaları tarafından gömülü videolara uygulanmasını istiyorsanız) YouTube yerleştirme kodunu kesip yapıştıran kullanıcılar). Bu durumda, bunun gibi bir şey yararlı olabilir:playVideopauseVideo

function initVideos() {

  // Find all video iframes on the page:
  var iframes = $(".video").find("iframe");

  // For each of them:
  for (var i = 0; i < iframes.length; i++) {
    // If "enablejsapi" is not set on the iframe's src, set it:
    if (iframes[i].src.indexOf("enablejsapi") === -1) {
      // ...check whether there is already a query string or not:
      // (ie. whether to prefix "enablejsapi" with a "?" or an "&")
      var prefix = (iframes[i].src.indexOf("?") === -1) ? "?" : "&amp;";
      iframes[i].src += prefix + "enablejsapi=true";
    }
  }
}

... bunu çağırırsanız , bir div'deki document.ready"video" sınıfına sahip tüm iframe'ler enablejsapi=truekaynaklarına eklenecektir, bu da playVideo / pauseVideo komutlarının bunlar üzerinde çalışmasına olanak tanır.

(not. bu örnek, ayarlanan tek satır için jQuery kullanır var iframes, ancak jQuery kullanmıyorsanız genel yaklaşım saf Javascript ile aynı şekilde çalışmalıdır).

stopVideo()Div'i gizlemeden önce YouTube oynatıcı örneğindeki yöntemi çağırarak videoyu durdurabilirsiniz.

player.stopVideo()

Daha fazla ayrıntı için buraya bakın: http://code.google.com/apis/youtube/js_api_reference.html#Playback_controls

RobW'un yöntemi benim için harika çalıştı. JQuery kullanan kişiler için işte benim kullandığım basitleştirilmiş bir sürüm:

var iframe = $(video_player_div).find('iframe');

var src = $(iframe).attr('src');      

$(iframe).attr('src', '').attr('src', src);

Bu örnekte "video_player", iframe'i içeren bir üst div'dir.

Tek bir sayfaya gömülü birden fazla YouTube videosunuz varsa çalışan jQuery kullanarak bulduğum bir çözümü paylaşmak istedim. Benim durumumda, her video için aşağıdaki gibi bir kalıcı açılır pencere tanımladım:

<div id="videoModalXX">
...
    <button onclick="stopVideo(videoID);" type="button" class="close"></button>
    ...
    <iframe width="90%" height="400" src="//www.youtube-nocookie.com/embed/video_id?rel=0&enablejsapi=1&version=3" frameborder="0" allowfullscreen></iframe>
...
</div>

Bu durumda videoModalXX, video için benzersiz bir kimliği temsil eder. Ardından, aşağıdaki işlev videoyu durdurur:

function stopVideo(id)
{
    $("#videoModal" + id + " iframe")[0].contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
}

Bu yaklaşımı seviyorum çünkü geri dönüp daha sonra izlemeye devam etmek istemeniz durumunda videoyu kaldığınız yerden duraklatıyor. Benim için iyi çalışıyor çünkü belirli bir kimliğe sahip video modalinin içindeki iframe'i arıyor. Özel bir YouTube öğe kimliği gerekmez. Umarım birileri bunu da faydalı bulacaktır.

iframe'in src'sini kaldırmanız yeterlidir

$('button.close').click(function(){
    $('iframe').attr('src','');;
});

Rob W cevabı, bir kaydırıcı gizlendiğinde bir videoyu iframe üzerinden nasıl duraklatacağımı anlamama yardımcı oldu. Yine de, onu çalıştırmadan önce bazı değişikliklere ihtiyacım vardı. İşte html'imin pasajı:

<div class="flexslider" style="height: 330px;">
  <ul class="slides">
    <li class="post-64"><img src="http://localhost/.../Banner_image.jpg"></li>
    <li class="post-65><img  src="http://localhost/..../banner_image_2.jpg "></li>
    <li class="post-67 ">
        <div class="fluid-width-video-wrapper ">
            <iframe frameborder="0 " allowfullscreen=" " src="//www.youtube.com/embed/video-ID?enablejsapi=1 " id="fitvid831673 "></iframe>
        </div>
    </li>
  </ul>
</div>

Bunun localhost'larda çalıştığını ve ayrıca Rob W'nin bahsettiği gibi " enablejsapi = 1 " video URL'sinin sonuna eklendiğini gözlemleyin .

JS dosyam şu:

jQuery(document).ready(function($){
    jQuery(".flexslider").click(function (e) {
        setTimeout(checkiframe, 1000); //Checking the DOM if iframe is hidden. Timer is used to wait for 1 second before checking the DOM if its updated

    });
});

function checkiframe(){
    var iframe_flag =jQuery("iframe").is(":visible"); //Flagging if iFrame is Visible
    console.log(iframe_flag);
    var tooglePlay=0;
    if (iframe_flag) {                                //If Visible then AutoPlaying the Video
        tooglePlay=1;
        setTimeout(toogleVideo, 1000);                //Also using timeout here
    }
    if (!iframe_flag) {     
        tooglePlay =0;
        setTimeout(toogleVideo('hide'), 1000);  
    }   
}

function toogleVideo(state) {
    var div = document.getElementsByTagName("iframe")[0].contentWindow;
    func = state == 'hide' ? 'pauseVideo' : 'playVideo';
    div.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');
}; 

Ayrıca, daha basit bir örnek olarak, bunu JSFiddle'da kontrol edin

Bu yaklaşım jQuery gerektirir. Önce, iframe'inizi seçin:

var yourIframe = $('iframe#yourId');
//yourId or something to select your iframe.

Şimdi bu iframe'in düğmesini oynat / duraklat'ı seçip tıklayın

$('button.ytp-play-button.ytp-button', yourIframe).click();

Umarım bu sana yardımcı olur.

RobW'un buradaki ve başka yerlerdeki cevapları çok yardımcı oldu, ancak ihtiyaçlarımı çok daha basit buldum. Bunu başka bir yerde yanıtladım , ama belki burada da faydalı olacaktır.

UIWebView'da yüklenecek bir HTML dizesi oluşturduğum bir yöntemim var:

NSString *urlString = [NSString stringWithFormat:@"https://www.youtube.com/embed/%@",videoID];

preparedHTML = [NSString stringWithFormat:@"<html><body style='background:none; text-align:center;'><script type='text/javascript' src='http://www.youtube.com/iframe_api'></script><script type='text/javascript'>var player; function onYouTubeIframeAPIReady(){player=new YT.Player('player')}</script><iframe id='player' class='youtube-player' type='text/html' width='%f' height='%f' src='%@?rel=0&showinfo=0&enablejsapi=1' style='text-align:center; border: 6px solid; border-radius:5px; background-color:transparent;' rel=nofollow allowfullscreen></iframe></body></html>", 628.0f, 352.0f, urlString];

HazırlananHTML dizesindeki stil öğelerini göz ardı edebilirsiniz. Önemli hususlar:

• "YT.player" nesnesini oluşturmak için API'yi kullanma. Bir noktada, iFrame etiketinde yalnızca video vardı ve bu, daha sonra JS ile "oynatıcı" nesnesine başvurmamı engelledi.
• Web'de ilk komut dosyası etiketinin (iframe_api src etiketine sahip olan) atlandığı birkaç örnek gördüm, ancak bunu çalıştırmak için kesinlikle buna ihtiyacım vardı.
• API komut dosyasının başında "oynatıcı" değişkeninin oluşturulması. Bu satırı atlayan bazı örnekler de gördüm.
• API komut dosyasında başvurulacak iFrame'e bir kimlik etiketi ekleme. O kısmı neredeyse unutuyordum.
• İFrame src etiketinin sonuna "enablejsapi = 1" ekleniyor. Bu, başlangıçta iFrame etiketinin bir özelliği olarak sahip olduğum için beni bir süre astı, bu benim için çalışmıyor / çalışmıyordu.

Videoyu duraklatmam gerektiğinde, şunu çalıştırıyorum:

[webView stringByEvaluatingJavaScriptFromString:@"player.pauseVideo();"];

Umarım yardımcı olur!

Bu, YT oyuncusuyla benim için iyi çalışıyor

 createPlayer(): void {
  return new window['YT'].Player(this.youtube.playerId, {
  height: this.youtube.playerHeight,
  width: this.youtube.playerWidth,
  playerVars: {
    rel: 0,
    showinfo: 0
  }
});
}

this.youtube.player.pauseVideo ();

Daha kısa, zarif ve güvenli bir yanıt: Video URL'sinin sonuna "? Enablejsapi = 1" ekleyin, ardından duraklatma komutunu temsil eden sıradan bir nesne oluşturun ve dizgeye ekleyin:

const YouTube_pause_video_command_JSON = JSON.stringify(Object.create(null, {
    "event": {
        "value": "command",
        "enumerable": true
    },
    "func": {
        "value": "pauseVideo",
        "enumerable": true
    }
}));

Window.postMessageElde edilen JSON dizesini gömülü video belgesine göndermek için yöntemi kullanın :

// |iframe_element| is defined elsewhere.
const video_URL = iframe_element.getAttributeNS(null, "src");
iframe_element.contentWindow.postMessage(YouTube_pause_video_command_JSON, video_URL);

Mesajlarınızın herhangi bir istenmeyen alıcıya gönderilmemesini sağlamak için Window.postMessageyöntemin targetOriginargümanı için video URL'sini belirttiğinizden emin olun .