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

Question

J'ai un div caché contenant une vidéo YouTube dans un fichier de type <iframe> . Lorsque l'utilisateur clique sur un lien, cette division devient visible. L'utilisateur doit alors pouvoir lire la vidéo.

Lorsque l'utilisateur ferme le panneau, la lecture de la vidéo doit s'arrêter. Comment puis-je réaliser cela ?

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

Answer 1

La manière la plus simple d'implémenter ce comportement est d'appeler la fonction pauseVideo y playVideo méthodes, si nécessaire. Inspiré par le résultat de mon 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 fonction

Démonstration : 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>

Answer 2

Voici une version jQuery de la réponse de RobW pour cacher ou interrompre 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) qui appelle les méthodes show / hide, et l'iframe (#video-iframe) qui a l'url de la vidéo telle quelle src="" et a le suffixe enablejsapi=1 ? qui permet le contrôle programmatique du lecteur (ex. .

Pour en savoir plus sur le html, voir la réponse de RobW.

Answer 3

Un moyen facile est de simplement définir la src de la vidéo à rien, de sorte que la vidéo disparaisse pendant qu'elle est cachée, puis de redéfinir la src à la vidéo que vous voulez lorsque vous cliquez sur le lien qui ouvre la vidéo. Pour ce faire, il suffit de définir un id à la iframe youtube et d'appeler la fonction src en utilisant cet id 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>

Answer 4

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

player.stopVideo()

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

Answer 5

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 à cette question ailleurs mais peut-être sera-t-elle utile ici aussi.

J'ai une méthode où je forme une chaîne HTML à charger dans une 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 preparedHTML. 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'empêchait de référencer l'objet "player" plus tard avec JS.
• J'ai vu quelques exemples sur le web où la première balise script (celle avec la balise iframe_api src) est omise, mais j'en avais absolument besoin pour que cela fonctionne.
• Création de la variable "player" au début de l'API script. J'ai également vu des exemples qui ont omis cette ligne.
• Ajout d'une balise id à l'iFrame pour être référencé dans l'API script. J'ai presque oublié cette partie.
• Ajouter "enablejsapi=1" à la fin de la balise iFrame src. Cela m'a retardé pendant un moment, car je l'avais initialement défini comme un attribut de la balise iFrame, ce qui ne fonctionne pas/ne fonctionnait pas pour moi.

Quand j'ai besoin de mettre la vidéo en pause, j'exécute simplement ceci :

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

J'espère que cela vous aidera !