web-dev-qa-db-fra.com

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

J'ai un div caché contenant une vidéo YouTube dans un <iframe>. Lorsque l'utilisateur clique sur un lien, cette div devient visible, l'utilisateur devrait alors être en mesure de 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 -->
javascriptyoutube-apiyoutube-javascript-api
84
0161-Jon

Le moyen le plus simple d'implémenter ce problème consiste à appeler les méthodes pauseVideo et 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>
176
Rob W

Voici une réponse jQuery sur la réponse de RobW à utiliser pour masquer/suspendre un 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 la div modale elle-même (# video-div) appelant les méthodes show/hide et l'iframe (# video-iframe) contenant l'url de la vidéo as src = "" et le suffixe enablejsapi. = 1? qui permet le contrôle programmatique du lecteur (ex.

Pour plus d'informations sur le code HTML, voir la réponse de RobW.

23
DrewT

Voici un extrait de code jQuery qui met 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":""}', '*')
});
15
quartarian

Voici un moyen facile de régler le src de la vidéo sur néant, pour que la vidéo disparaisse tant qu'elle est masquée, puis redéfinissez le src sur la vidéo de votre choix lorsque vous cliquez sur le lien qui ouvre la vidéo. qui définit simplement un identifiant sur 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>
9
Paula

Comme vous devez définir ?enablejsapi=true dans le src de l'iframe avant de pouvoir utiliser les commandes playVideo/pauseVideo mentionnées dans autres réponses , il peut être utile de l'ajouter par programmation via Javascript (surtout si, par exemple, vous voulez ce comportement appliquer aux vidéos intégrées par d’autres utilisateurs qui viennent de couper et coller un code intégré YouTube). Dans ce cas, quelque chose comme ceci 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 sur document.ready, alors tous les iframes d'une div avec une classe de "video" auront enablejsapi=true ajouté à leur source, ce qui permettra aux commandes playVideo/pauseVideo de fonctionner dessus.

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

6
Nick F

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

player.stopVideo()

Pour plus d'informations, voir ici: http://code.google.com/apis/youtube/js_api_reference.html#Playback_controls

5
david

La manière de RobW a très bien fonctionné pour moi. Pour les personnes utilisant jQuery, voici une version simplifiée que j'ai finalement utilisée:

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.

4
skribbz14

Je souhaitais partager une solution que j’ai proposée avec 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 parce que la vidéo est 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. Espérons que quelqu'un trouvera cela utile aussi.

4
Poldon

il suffit d'enlever le src d'iframe

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

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

Notez que cela fonctionne sur localhosts et, comme l'a mentionné Rob W, "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, comme exemple plus simple, regardez ceci sur JSFiddle

1
Fahim

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 play/pause de cette iframe et cliquez dessus

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

J'espère que cela vous aidera.

1
Hongarc

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 ceci 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 le style dans la chaîne préparé en HTML. 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, ce qui m'a empêché de référencer l'objet "player" ultérieurement 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 certainement besoin pour que cela fonctionne.
  • Création de la variable "player" au début du script API. J'ai également vu des exemples qui ont omis cette ligne.
  • Ajout d'une balise ID à l'iFrame à référencer dans le script de l'API. J'ai presque oublié cette partie.
  • Ajout de "enablejsapi = 1" à la fin de la balise iFrame src. Cela m'a suspendu pendant un moment, comme je l'avais initialement comme attribut de la balise iFrame, ce qui ne fonctionne pas/n'a pas fonctionné pour moi.

Lorsque je dois mettre la vidéo en pause, je lance simplement ceci:

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

J'espère que cela pourra aider!

0
Brian

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 personnalisez un objet ordinaire représentant la commande de pause:

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

Utilisez la méthode Window.postMessage pour envoyer la chaîne JSON obtenue au document vidéo incorporé:

// |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 targetOrigin de la méthode Window.postMessage afin de vous assurer que vos messages ne seront envoyés à aucun destinataire non souhaité.

0
Patrick Dark

Cela fonctionne très bien pour moi avec le joueur 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 ();

0
HuyLe