Come mettere in pausa un player di YouTube quando si nasconde l'iframe?

Ho un div nascosto contenente un video di YouTube in un file <iframe>. Quando l'utente fa clic su un collegamento, questo div diventa visibile, l'utente dovrebbe quindi essere in grado di riprodurre il video.

Quando l'utente chiude il pannello, la riproduzione del video dovrebbe interrompersi. Come posso raggiungere questo obiettivo?

Codice:

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

Il modo più semplice per implementare questo comportamento è chiamare i metodi pauseVideoe playVideo, se necessario. Ispirato dal risultato della mia precedente risposta , ho scritto una funzione senza plugin per ottenere il comportamento desiderato.

Le uniche regolazioni:

• Ho aggiunto una funzione, toggleVideo
• Ho aggiunto ?enablejsapi=1all'URL di YouTube, per abilitare la funzione

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

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

Ecco una versione di jQuery della risposta di RobW per l'uso di nascondere / mettere in pausa un iframe in una finestra modale:

    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":""}', '*');
        }
    }

Gli elementi html a cui si fa riferimento sono il div modale stesso (# video-div) che chiama i metodi mostra / nascondi e l'iframe (# video-iframe) che ha l'URL del video come src = "" e ha il suffisso enablejsapi = 1 ? che consente il controllo programmatico del player (es.

Per ulteriori informazioni sull'html, vedere la risposta di RobW.

Ecco un semplice frammento di jQuery per mettere in pausa tutti i video sulla pagina in base alle risposte di RobW e DrewT:

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

Ehi, un modo semplice è semplicemente impostare src del video su nulla, in modo che il video scompaia mentre è nascosto e quindi reimpostare src sul video che desideri quando fai clic sul link che apre il video .. da fare che imposta semplicemente un ID all'iframe di YouTube e chiama la funzione src usando quell'ID in questo modo:

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

Poiché è necessario impostare ?enablejsapi=trueil file src dell'iframe prima di poter utilizzare i comandi playVideo/ pauseVideomenzionati in altre risposte , potrebbe essere utile aggiungerlo a livello di programmazione tramite Javascript (soprattutto se, ad es., Si desidera che questo comportamento si applichi ai video incorporati da altri utenti che hanno appena tagliato e incollato un codice di incorporamento di YouTube). In tal caso, qualcosa del genere potrebbe essere utile:

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

... se lo chiami su, document.readytutti gli iframe in un div con una classe di "video" verranno enablejsapi=trueaggiunti alla loro sorgente, il che consente ai comandi playVideo / pauseVideo di funzionare su di essi.

(nb. questo esempio usa jQuery per quella riga che imposta var iframes, ma l'approccio generale dovrebbe funzionare altrettanto bene con Javascript puro se non stai usando jQuery).

Puoi interrompere il video chiamando il stopVideo()metodo sull'istanza del player di YouTube prima di nascondere il div, ad es

player.stopVideo()

Per maggiori dettagli, vedi qui: http://code.google.com/apis/youtube/js_api_reference.html#Playback_controls

Il modo in cui RobW ha funzionato alla grande per me. Per le persone che usano jQuery ecco una versione semplificata che ho finito per usare:

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

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

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

In questo esempio "video_player" è un div principale contenente l'iframe.

Volevo condividere una soluzione che ho trovato utilizzando jQuery che funziona se hai più video di YouTube incorporati in una singola pagina. Nel mio caso, ho definito un popup modale per ogni video come segue:

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

In questo caso, videoModalXX rappresenta un ID univoco per il video. Quindi, la seguente funzione interrompe il video:

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

Mi piace questo approccio perché mantiene il video in pausa dal punto in cui lo avevi interrotto nel caso in cui desideri tornare indietro e continuare a guardarlo più tardi. Funziona bene per me perché sta cercando l'iframe all'interno del video modale con un ID specifico. Non è richiesto alcun ID elemento YouTube speciale. Si spera che qualcuno trovi utile anche questo.

basta rimuovere src di iframe

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

La risposta di Rob W mi ha aiutato a capire come mettere in pausa un video su iframe quando uno slider è nascosto. Tuttavia, avevo bisogno di alcune modifiche prima di poterlo far funzionare. Ecco uno snippet del mio html:

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

Osserva che questo funziona su localhost e, come ha detto Rob W, " enablejsapi = 1 " è stato aggiunto alla fine dell'URL del video.

Di seguito è riportato il mio file JS:

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":""}', '*');
}; 

Inoltre, come esempio più semplice, controlla questo su JSFiddle

Questo approccio richiede jQuery. Per prima cosa, seleziona il tuo iframe:

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

Ora seleziona il pulsante di riproduzione / pausa di questo iframe e fai clic su di esso

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

Spero che ti possa aiutare.

Le risposte di RobW qui e altrove sono state molto utili, ma ho trovato le mie esigenze molto più semplici. Ho risposto altrove , ma forse sarà utile anche qui.

Ho un metodo in cui formo una stringa HTML da caricare in una UIWebView:

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

Puoi ignorare gli elementi di stile nella stringa readyHTML. Gli aspetti importanti sono:

• Utilizzo dell'API per creare l'oggetto "YT.player". A un certo punto, avevo solo il video nel tag iFrame e questo mi ha impedito di fare riferimento all'oggetto "player" in seguito con JS.
• Ho visto alcuni esempi sul web in cui il primo tag script (quello con il tag iframe_api src) viene omesso, ma ne avevo assolutamente bisogno per farlo funzionare.
• Creazione della variabile "player" all'inizio dello script API. Ho anche visto alcuni esempi che hanno omesso quella riga.
• Aggiunta di un tag ID all'iFrame a cui fare riferimento nello script API. Quasi dimenticavo quella parte.
• Aggiunta di "enablejsapi = 1" alla fine del tag iFrame src. Questo mi ha bloccato per un po ', poiché inizialmente lo avevo come attributo del tag iFrame, che non funziona / non ha funzionato per me.

Quando ho bisogno di mettere in pausa il video, eseguo semplicemente questo:

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

Spero che aiuti!

Questo funziona bene per me con il lettore YT

 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 ();

Una risposta più concisa, elegante e sicura: aggiungi "? Enablejsapi = 1" alla fine dell'URL del video, quindi costruisci e stringa un oggetto ordinario che rappresenta il comando di pausa:

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

Utilizza il Window.postMessagemetodo per inviare la stringa JSON risultante al documento video incorporato:

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

Assicurati di specificare l'URL del video per l' argomento Window.postMessagedel metodo targetOriginper assicurarti che i tuoi messaggi non vengano inviati a destinatari indesiderati.