Comment mettre en pause un lecteur YouTube en masquant l'iframe?

J'ai un div caché contenant une vidéo YouTube dans un fichier <iframe>. Lorsque l'utilisateur clique sur un lien, ce div devient visible, l'utilisateur devrait alors pouvoir lire la vidéo.

Lorsque l'utilisateur ferme le panneau, la vidéo doit arrêter la lecture. Comment puis-je atteindre cet objectif?

Code:

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

Le moyen le plus simple d'implémenter ce comportement consiste à appeler les méthodes pauseVideoet playVideo, si nécessaire. Inspiré par le résultat de ma réponse précédente , j'ai écrit une fonction sans plugin pour obtenir le comportement souhaité.

Les seuls ajustements:

• J'ai ajouté une fonction, toggleVideo
• J'ai ajouté ?enablejsapi=1à l'URL de YouTube pour activer la fonctionnalité

Démo: http://jsfiddle.net/ZcMkt/
Code:

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

Voici une version jQuery de la réponse de RobW pour l'utilisation de masquer / mettre en pause une iframe dans une fenêtre 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":""}', '*');
        }
    }

Les éléments html auxquels il est fait référence sont le div modal lui-même (# video-div) appelant les méthodes show / hide, et l'iframe (# video-iframe) qui a l'url de la vidéo comme src = "" et a le suffixe enablejsapi = 1 ? qui permet le contrôle programmatique du lecteur (ex.

Pour plus d'informations sur le html, consultez la réponse de RobW.

Voici un simple extrait de jQuery pour mettre en pause toutes les vidéos de la page en fonction des réponses de RobW et DrewT:

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

Hé, un moyen simple consiste simplement à définir le src de la vidéo sur rien, de sorte que la vidéo disparaisse tant qu'elle est cachée, puis réglez le src sur la vidéo que vous voulez lorsque vous cliquez sur le lien qui ouvre la vidéo. qui définit simplement un identifiant pour l'iframe youtube et appelle la fonction src en utilisant cet identifiant comme ceci:

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

Puisque vous devez définir ?enablejsapi=truedans le src de l'iframe avant de pouvoir utiliser les commandes playVideo/ pauseVideomentionnées dans d' autres réponses , il peut être utile de l'ajouter par programmation via Javascript (surtout si, par exemple, vous souhaitez que ce comportement s'applique aux vidéos intégrées par d'autres utilisateurs qui viennent de couper et coller un code d'intégration YouTube). Dans ce cas, quelque chose comme ça pourrait être 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";
    }
  }
}

... si vous appelez ceci, document.readyalors toutes les iframes d'un div avec une classe de "video" seront enablejsapi=trueajoutées à leur source, ce qui permet aux commandes playVideo / pauseVideo de fonctionner dessus.

(nb. cet exemple utilise jQuery pour cette seule ligne qui définit var iframes, mais l'approche générale devrait fonctionner aussi bien avec du Javascript pur si vous n'utilisez pas jQuery).

Vous pouvez arrêter la vidéo en appelant la stopVideo()méthode sur l'instance du lecteur YouTube avant de masquer le div par exemple

player.stopVideo()

Pour plus de détails, cliquez ici: http://code.google.com/apis/youtube/js_api_reference.html#Playback_controls

La méthode de RobW a très bien fonctionné pour moi. Pour les personnes utilisant jQuery, voici une version simplifiée que j'ai fini par utiliser:

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

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

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

Dans cet exemple, "video_player" est un div parent contenant l'iframe.

Je voulais partager une solution que j'ai trouvée en utilisant jQuery qui fonctionne si vous avez plusieurs vidéos YouTube intégrées sur une seule page. Dans mon cas, j'ai défini un popup modal pour chaque vidéo comme suit:

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

Dans ce cas, videoModalXX représente un identifiant unique pour la vidéo. Ensuite, la fonction suivante arrête la vidéo:

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

J'aime cette approche car elle maintient la vidéo en pause là où vous l'avez laissée au cas où vous voudriez revenir en arrière et continuer à regarder plus tard. Cela fonctionne bien pour moi car il recherche l'iframe à l'intérieur du modal vidéo avec un identifiant spécifique. Aucun identifiant d'élément YouTube spécial n'est requis. J'espère que quelqu'un trouvera cela également utile.

supprimez simplement src de iframe

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

La réponse de Rob W m'a aidé à comprendre comment mettre en pause une vidéo sur iframe lorsqu'un curseur est masqué. Pourtant, j'avais besoin de quelques modifications avant de pouvoir le faire fonctionner. Voici un extrait de mon code 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>

Observez que cela fonctionne sur localhost et aussi comme Rob W mentionné « enablejsapi = 1 » a été ajouté à la fin de l'URL de la vidéo.

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

Aussi, à titre d'exemple plus simple, consultez ceci sur JSFiddle

Cette approche nécessite jQuery. Tout d'abord, sélectionnez votre iframe:

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

Maintenant, vous sélectionnez le bouton lecture / pause de cette iframe et cliquez dessus

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

J'espère que cela vous aidera.

Les réponses de RobW ici et ailleurs ont été très utiles, mais j'ai trouvé que mes besoins étaient beaucoup plus simples. J'ai répondu à ça ailleurs , mais peut-être que ce sera utile ici aussi.

J'ai une méthode où je forme une chaîne HTML à charger dans un 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];

Vous pouvez ignorer les éléments de style dans la chaîne prepareHTML. Les aspects importants sont:

• Utilisation de l'API pour créer l'objet "YT.player". À un moment donné, je n'avais que la vidéo dans la balise iFrame et cela m'a empêché de référencer l'objet "player" plus tard avec JS.
• J'ai vu quelques exemples sur le Web où la première balise de script (celle avec la balise iframe_api src) est omise, mais j'en avais vraiment besoin pour que cela fonctionne.
• Création de la variable "player" au début du script API. J'ai également vu quelques exemples qui ont omis cette ligne.
• Ajout d'une balise d'identification à l'iFrame à référencer dans le script API. J'ai presque oublié cette partie.
• Ajout de "enablejsapi = 1" à la fin de la balise iFrame src. Cela m'a suspendu pendant un certain temps, car je l'avais initialement comme attribut de la balise iFrame, qui ne fonctionne pas / n'a pas fonctionné pour moi.

Lorsque j'ai besoin de mettre la vidéo en pause, je lance simplement ceci:

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

J'espère que ça t'as aidé!

Cela fonctionne bien pour moi avec le lecteur 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 ();

Une réponse plus concise, élégante et sécurisée: ajoutez «? Enablejsapi = 1» à la fin de l'URL de la vidéo, puis construisez et stringify un objet ordinaire représentant la commande pause:

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

Utilisez la Window.postMessageméthode pour envoyer la chaîne JSON résultante au document vidéo intégré:

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

Assurez-vous de spécifier l'URL de la vidéo pour l' argument de la Window.postMessageméthode targetOriginpour vous assurer que vos messages ne seront envoyés à aucun destinataire non souhaité.