web-dev-qa-db-fra.com

Arrêter une vidéo youtube avec jQuery?

J'ai construit un curseur jQuery, qui ne contient que trois panneaux qui glissent en appliquant des valeurs CSS gauche négatives. Fonctionne très bien, mais j'ai une vidéo youtube dans une diapositive qui ne s'arrête pas lorsque je glisse. J'ai essayé display: none et Visibility: hidden qui fonctionne dans tout sauf IE, l'audio continue dans IE.

Existe-t-il un moyen facile de tuer une vidéo avec jQuery?

javascriptjqueryyoutube
49
wesbos

depuis les docs de l'API :

player.stopVideo()

donc dans jQuery:

$('#playerID').get(0).stopVideo();
37
cobbal

Cette solution est simple, élégante et fonctionne dans tous les navigateurs:

var video = $("#playerid").attr("src");
$("#playerid").attr("src","");
$("#playerid").attr("src",video);
85
HeyTiger

1.include 

<script type="text/javascript" src="http://www.youtube.com/player_api"></script>

2.ajoutez votre iframe youtube.

<iframe id="player" src="http://www.youtube.com/embed/YOURID?rel=0&wmode=Opaque&enablejsapi=1" frameborder="0"></iframe>

3. temps magique. 

      <script>
            var player;
            function onYouTubePlayerAPIReady() {player = new YT.Player('player');}
            //so on jquery event or whatever call the play or stop on the video.
            //to play player.playVideo();
            //to stop player.stopVideo();
     </script>
18
Chris Wheaton

Pour commencer la vidéo 

var videoURL = $('#playerID').prop('src');
videoURL += "&autoplay=1";
$('#playerID').prop('src',videoURL);

Pour arrêter la vidéo 

var videoURL = $('#playerID').prop('src');
videoURL = videoURL.replace("&autoplay=1", "");
$('#playerID').prop('src','');
$('#playerID').prop('src',videoURL);

Vous voudrez peut-être remplacer "& autoplay = 1" par "? Autoplay = 1" s'il n'y a pas de paramètre supplémentaire

fonctionne pour vimeo et youtube sur FF & Chrome

17
Faiz Mohamed Haneef

J'ai déjà eu ce problème et la conclusion à laquelle je suis arrivé est que le seul moyen d'arrêter une vidéo dans IE est de la supprimer du DOM.

17
Felix

Je faisais face au même problème. Après beaucoup d'alternatives, ce que j'ai fait était de simplement réinitialiser l'incorporation src = "" avec la même URL.

Extrait de code:

  $("#videocontainer").fadeOut(200);<br/>
  $("#videoplayer").attr("src",videoURL);

J'ai pu au moins arrêter la lecture de la vidéo lorsque je la cache. :-)

8
JackSparrow

Ma solution à cela qui fonctionne pour le format moderne embed de YouTube est la suivante.

En supposant que iframe votre vidéo est en cours de lecture a id="#video", ce simple script Javascript fera l'affaire.

$(document).ready(function(){
  var stopVideo = function(player) {
    var vidSrc = player.prop('src');
    player.prop('src', ''); // to force it to pause
    player.prop('src', vidSrc);
  };

  // at some appropriate time later in your code
  stopVideo($('#video'));

});

J'ai vu des solutions proposées à ce problème impliquant l'utilisation du YouTube API, mais si votre site n'est pas un site https, ou si votre vidéo est intégrée au format moderne recommandé par YouTube, ou si l'option no-cookies est définie, alors ces solutions ne fonctionnent pas et vous obtenez l'effet "TV set to a channel channel" au lieu de votre vidéo.

J'ai testé ce qui précède sur tous les navigateurs sur lesquels je pouvais mettre la main et cela fonctionne de manière très fiable.

7
Dave Sag

si vous avez une propriété autoplay dans l'iframe src, elle ne vous aidera pas à recharger src attr/prop, vous devez donc remplacer autoplay = 1 à autoplay = 0 

  var stopVideo = function(player) {
    var vidSrc = player.prop('src').replace('autoplay=1','autoplay=0');
    player.prop('src', vidSrc);
  };

  stopVideo($('#video'));
4
talsibony

Malheureusement, si l'attribut id de la balise object n'existe pas, la lecture/arrêt/pauseVideo () ne fonctionne pas avec IE.

<object style="display: block; margin-left: auto; margin-right: auto;" width="425" height="344" data="http://www.youtube.com/v/7scnebkm3r0&amp;fs=1&amp;border=1&amp;autoplay=1&amp;enablejsapi=1&amp;version=3" type="application/x-shockwave-flash"><param name="allowFullScreen" value="true" />
  <param name="allowscriptaccess" value="always" />
  <param name="allowfullscreen" value="true" />
  <param name="src" value="http://www.youtube.com/v/7scnebkm3r0&amp;fs=1&amp;border=1&amp;autoplay=1&amp;enablejsapi=1&amp;version=3" />
</object>
<object id="idexists" style="display: block; margin-left: auto; margin-right: auto;" width="425" height="344" data="http://www.youtube.com/v/pDW47HNaN84&amp;fs=1&amp;border=1&amp;autoplay=1&amp;enablejsapi=1&amp;version=3" type="application/x-shockwave-flash">
  <param name="allowscriptaccess" value="always" />
  <param name="allowFullScreen" value="true" />
  <param name="src" value="http://www.youtube.com/v/pDW47HNaN84&amp;fs=1&amp;border=1&amp;autoplay=1&amp;enablejsapi=1&amp;version=3" />
</object>
<script>
  function pauseVideo()
  {
    $("object").each
    (
      function(index)
      {
        obj = $(this).get(0);
        if (obj.pauseVideo) obj.pauseVideo();
      }
    );
  }
</script>
<button onClick="pauseVideo();">Pause</button>

Essayez le!

3
Progz Killer

Il m'a fallu un peu de recherche pour résoudre ce problème, mais je suis tombé sur une implémentation multi-navigateurs:

HTML

<div class="video" style="display: none">
    <div class="mask"></div>
    <a href="#" class="close-btn"><span class="fa fa-times"></span></a>
    <div class="overlay">
        <iframe id="player" width="100%" height="70%" src="//www.youtube.com/embed/Xp697DqsbUU" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

jQuery

$('.launch-video').click(function() {
  $('.video').show();
  $("#player").attr('src','//www.youtube.com/embed/Xp697DqsbUU'); 
});

$('.close-btn').click(function() {
  $('.video').hide();
  $("#player").attr('src','');   
});

En gros, il ouvre ma boîte à lumière et renseigne mon attribut src. À la fermeture, il suffit de supprimer la valeur src (puis de la re-remplir à l'ouverture).

2
Matt Saunders

Cela fonctionne pour moi sur les lecteurs YouTube et Vimeo . En principe, je ne fais que réinitialiser l'attribut src, alors sachez que la vidéo va revenir au début.

var $theSource = $theArticleDiv.find('.views-field-field-video-1 iframe').attr('src');

$theArticleDiv.find('.views-field-field-video-1 iframe').attr('src', $theSource); //reset the video so it stops playing

$ theArticleDiv est le conteneur de ma vidéo actuelle. Comme j'ai plusieurs vidéos sur la page et qu'elles sont exposées via une vue Drupal au moment de l'exécution, je n'ai aucune idée de ce que leurs identifiants vont être. J'ai donc lié muy click event à un élément actuellement visible, trouvé son parent et décidé que c'est $ theArticleDiv.

('.views-field-field-video-1 iframe') recherche l'iframe de la vidéo en cours pour moi - en particulier celui qui est visible en ce moment. Cette iframe a un attribut src. Je prends juste cela et le réinitialise à ce qu'il était déjà, et automatiquement, la vidéo s'arrête et revient au début… .. Si mes utilisateurs veulent faire une pause et reprendre, ils peuvent le faire sans fermer la vidéo, de Bien sûr, mais franchement, s’ils ferment la vidéo, j’ai l’impression qu’ils peuvent vivre avec le fait qu’elle soit réinitialisée au début.

HTH

2
Sam Moore

Eh bien, il existe un moyen beaucoup plus simple de le faire… .. Lorsque vous saisissez un lien intégré pour la vidéo youtube, faites défiler un peu et vous verrez quelques options: Sélectionnez ici Utiliser ancien lien d'intégration . Ceci résout le problème.

2
santo101

En fait, vous n'avez besoin que de javascript et construisez correctement la vidéo youtube avec swfobject google library

Ceci est un exemple

<script type="text/javascript" src="swfobject.js"></script>    
<div style="width: 425; height: 356px;">
  <div id="ytapiplayer">
    You need Flash player 8+ and JavaScript enabled to view this video.
  </div>      
  <script type="text/javascript">
    var params = { allowScriptAccess: "always" };
    var atts = { id: "myytplayer" };
    swfobject.embedSWF("http://www.youtube.com/v/y5whWXxGHUA?enablejsapi=1&playerapiid=ytplayer&version=3",
    "ytapiplayer", "425", "356", "8", null, null, params, atts);
  </script>
</div>

Après cela, vous pouvez appeler cette fonction:

ytplayer = document.getElementById("myytplayer");
ytplayer.playVideo();
ytplayer.pauseVideo();
ytplayer.stopVideo();
1
vhtellez

Cela a fonctionné sur tous les navigateurs modernes, y compris IE9 | IE8 | IE7. Le code suivant ouvrira votre vidéo YouTube dans une boîte de dialogue modale de l'interface utilisateur jQuery, lira automatiquement la vidéo à partir de 0h00 le dialogue ouvert et arrêtera la vidéo à la fermeture du dialogue.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>    

<script type="text/javascript">

    google.load("swfobject", "2.1");

    function _run() {
        /* YouTube player embed for modal dialog */
        // The video to load.
        var videoID = "INSERT YOUR YOUTUBE VIDEO ID HERE"
        // Lets Flash from another domain call JavaScript
        var params = { allowScriptAccess: "always" };
        // The element id of the Flash embed
        var atts = { id: "ytPlayer" };
        // All of the magic handled by SWFObject (http://code.google.com/p/swfobject/)
        swfobject.embedSWF("http://www.youtube.com/v/" + videoID + "?version=3&enablejsapi=1&playerapiid=player1&autoplay=1",
                       "videoDiv", "879", "520", "9", null, null, params, atts);
    }
    google.setOnLoadCallback(_run);

    $(function () {
        $("#big-video").dialog({
            autoOpen: false,
            close: function (event, ui) {
                ytPlayer.stopVideo() // stops video/audio on dialog close
            },
            modal: true,
            open: function (event, ui) {
                ytPlayer.seekTo(0) // resets playback to beginning of video and then plays video
            }
        });

        $("#big-video-opener").click(function () {
            $("#big-video").dialog("open");
            return false;
        });

    });
</script>

<div id="big-video" title="Video">
    <div id="videoDiv">Loading...</div>
</div>

<a id="big-video-opener" class="button" href="#">Watch the short video</a>
1
dexterca

si vous utilisez parfois playerID.stopVideo (); ça ne marche pas, voici un truc,

 function stopVideo() {
           playerID.seekTo(0);
    playerID.stopVideo();
}
0
Dheeraj Vijay