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

86

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 -->
0161-Jon
la source
Je ne suis pas sûr, mais vous devrez peut-être trouver un moyen d'arrêter la vidéo ou de supprimer la vidéo du div et pas simplement de la cacher ..
aniri
vous devriez accepter la réponse.
snymkpr

Réponses:

188

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>
Rob W
la source
1
Vous avez certainement besoin de la case à cocher verte si cela a fonctionné. Je prends aussi cette solution - très bien, j'ai ces images vidéo dans un accordéon jQueryUI, donc je dois les attacher à chaque événement déclencheur.
jeffkee
Je voulais juste souligner que, malheureusement, l'API de YouTube vous oblige à utiliser des guillemets doubles pour le message envoyé via postMessage. Vous ne pouvez pas basculer entre les guillemets doubles externes et les guillemets simples intérieurs, par exemple.
Jordanie
1
@Jordan C'est parfaitement logique car le message devrait être JSON. JSON, par définition, utilise des guillemets doubles pour citer les clés et les valeurs.
Rob W
2
Si quelqu'un est intéressé, j'ai mis à jour le code pour arrêter la lecture de la vidéo lorsque vous cliquez sur le bouton "Fermer" sur un modal bootstrap 3. $ ("# MyModal-close") .click (function () {var div = document.getElementById ("MyModal-videoWrapper"); var iframe = div.getElementsByTagName ("iframe") [0] .contentWindow; iframe.postMessage ('{"event": "command", "func": "' + 'pauseVideo' + '", "args": ""}', '*');});
Ryan Walton
10
Veuillez noter que vous devez ajouter l' ?enablejsapi=1URL d'incorporation iframe comme ceci: <iframe class="embed-responsive-item" src="//www.youtube.com/embed/WIZUeIDFALw?html5=1&enablejsapi=1" allowfullscreen></iframe>ou cela ne fonctionnera pas :)
dineth
23

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.

DrewT
la source
5
Quelle lisibilité améliorée a changé le? conditionnel à if / else mais merci de m'avoir lancé dessus. Je pensais juste que j'avais quelque chose à ajouter, c'est tout.
DrewT
15

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":""}', '*')
});
quartaire
la source
si vous ne voulez pas utiliser jQuery, le code à l'intérieur de la fonction «each» est le même après avoir dé-référencé l'objet jQuery. c'est-à-dire node.contentWindow. ...
mattdlockyer
Comment inverser la lecture pour recommencer lorsque la vidéo est à nouveau affichée?
Carl Papworth
Remplacez simplement "pauseVideo" par "playVideo". Exemple: jsfiddle.net/ora2kqzq/1
quartarien
Qu'à cela ne fonctionne plus ... même lorsque je tente {"event":"command","func":"playVideo","args":[],"id":1,"channel":"widget"}après ce {"event":"listening","id":1,"channel":"widget"}qui est ce que YT.Player iframe api est l' affichage sur YouTube embed.
NoBugs
9

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>
Paula
la source
4
Avertissement: les modifications apportées au iframe's srcavec javascript seront poussées par inadvertance window.history, provoquant des problèmes avec le bouton Retour.
Jordan Arseno
Merci Jordan! J'ai juste commencé à utiliser cette réponse moi-même et je n'étais pas au courant de ce comportement. Mieux vaut savoir maintenant que plus tard :)
MMachinegun
Avertissement juste à quiconque essayant cette méthode: cela peut provoquer un décalage extrêmement notable si vous l'utilisez pour basculer entre les divs contenant des intégrations iframe pour YouTube. Faites attention.
Muhammad Abdul-Rahim
6

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

Nick F
la source
5

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

David
la source
quel est l'objet joueur et comment y accéder? Je reçois le joueur n'est pas défini et la vidéo est toujours
lue
Il est disponible lorsque vous l'avez instancié à l'aide de l'API JS.
david
4

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.

skribbz14
la source
4

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.

Poldon
la source
Cela fonctionnait très bien sans une tonne de code. J'ai plusieurs vidéos YT sur la page et je montre juste un pouce YT et j'avais besoin d'une solution d'arrêt / pause. Et en changeant pauseVideo en playVideo, j'ai pu démarrer la vidéo lorsqu'elle a été étendue à la largeur totale de la colonne
WebDude0482
2

supprimez simplement src de iframe

$('button.close').click(function(){
    $('iframe').attr('src','');;
});
rakesh kejriwal
la source
Mais il peut vouloir continuer à jouer lorsque les utilisateurs cliquent sur Ouvrir.
Coda Chang
frère, cliquez à nouveau sur ajouter src via jquery, cela fonctionnera
rakesh kejriwal
1

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

Fahim Hossain
la source
1

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.

hong4rc
la source
0

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

Brian
la source
Au cas où vous vous demandez pourquoi pas de votes positifs, c'est parce que ce n'est pas du javascript, donc pas utile pour le cas d'utilisation de l'OP qui est un iframe référençant une URL d'intégration youtube et non une application iOS.
Vroo
@Vroo Ouais, je comprends ça. Je voulais juste laisser cette réponse ici au cas où une autre personne iOS viendrait ici et trouverait cette question comme je l'ai fait.
Brian
0

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

HuyLe
la source
0

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

Patrick Dark
la source