it-swarm.com.de

Stoppen Sie ein Youtube-Video mit Jquery?

Ich habe einen Jquery-Schieberegler, den ich gebaut habe, im Grunde nur drei Pannels, die durch Anwenden negativer linker CSS-Werte gleiten. Funktioniert super, aber ich habe ein Youtube-Video in einer Folie, das beim Slide nicht aufhört. Ich habe versucht, Anzeige: keine und Sichtbarkeit: versteckt, was in allen außer IE funktioniert, das Audio läuft im IE weiter.

Gibt es eine einfache Möglichkeit, ein Video mit Jquery zu töten?

49
wesbos

aus den API-Dokumenten :

player.stopVideo()

so in jQuery:

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

Diese Lösung ist einfach und elegant und funktioniert in allen Browsern:

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

1. einschließen 

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

2. füge dein youtube iframe hinzu.

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

3. magische Zeit. 

      <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

Video starten 

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

Video stoppen 

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

Möglicherweise möchten Sie "& autoplay = 1" durch "? Autoplay = 1" ersetzen, wenn keine zusätzlichen Parameter vorhanden sind

funktioniert für vimeo und youtube auf FF & Chrome

17

Ich hatte dieses Problem schon einmal und die Schlussfolgerung, zu der ich gekommen bin, ist die einzige Möglichkeit, ein Video in IE zu stoppen, ist es aus dem DOM zu entfernen.

17
Felix

Ich hatte das gleiche Problem. Nach vielen Alternativen habe ich einfach das eingebettete src = "" mit derselben URL zurückgesetzt.

Code-Auszug:

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

Ich konnte das Video zumindest anhalten, wenn ich es verstecke. :-)

8
JackSparrow

Meine Lösung dafür, die für das moderne YouTube-Format embed funktioniert, lautet wie folgt.

Angenommen, die iframe, in der Ihr Video abgespielt wird, hat id="#video", erledigt dieses einfache Javascript die Aufgabe.

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

});

Ich habe Lösungsvorschläge zu diesem Problem gesehen, bei denen YouTube API verwendet wurde. Wenn es sich bei Ihrer Website jedoch nicht um eine https-Website handelt oder Ihr Video in das von YouTube empfohlene moderne Format eingebettet ist oder wenn Sie die no-cookies-Option gesetzt haben, dann Diese Lösungen funktionieren nicht und Sie erhalten den Effekt "TV-Gerät auf einen toten Kanal" anstelle Ihres Videos.

Ich habe das oben auf jedem Browser getestet, den ich in die Finger bekommen konnte, und es funktioniert sehr zuverlässig.

7
Dave Sag

wenn Sie eine Autoplay-Eigenschaft im Iframe-Quellcode haben, hilft es nicht, den Quellcode attr/prop neu zu laden, sodass Sie den Autoplay-Wert = 1 durch Autoplay = ersetzen müssen

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

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

Wenn das id-Attribut des object-Tags nicht vorhanden ist, funktionieren play/stop/pauseVideo () leider nicht im 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>

Versuch es!

3
Progz Killer

Ich habe ein wenig herumgeforscht, um das herauszufinden, aber ich habe mich für diese Browser-übergreifende Implementierung entschieden:

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','');   
});

Was es im Wesentlichen tut, ist, meine Lightbox zu öffnen und mein Src-Attribut aufzufüllen, und beim Schließen einfach den Src-Wert entfernen (und dann beim Öffnen neu füllen).

2
Matt Saunders

Dies funktioniert für mich sowohl auf YouTube- als auch auf Vimeo-Playern ... Ich setze im Wesentlichen nur das src-Attribut zurück. Beachten Sie, dass das Video an den Anfang zurückgeht.

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 ist der Container meines aktuellen Videos. Da ich mehrere Videos auf der Seite habe und sie zur Laufzeit über eine Drupal-Ansicht angezeigt werden, habe ich keine Ahnung, wie ihre IDs aussehen werden. Also habe ich muy click an ein momentan sichtbares Element gebunden, das übergeordnete Element gefunden und entschieden, dass $ theArticleDiv das ist.

('.views-field-field-video-1 iframe') findet den iframe des aktuellen Videos für mich - insbesondere den, der gerade sichtbar ist. Dieser iframe hat ein src-Attribut. Ich nehme das einfach auf und setze es wieder auf das zurück, was es schon war, und automatisch stoppt das Video und kehrt zum Start zurück. Wenn meine Benutzer pausieren und fortfahren möchten, können sie dies tun, ohne das Video zu schließen Natürlich - aber wenn sie das Video schließen, glaube ich, dass sie damit leben können, dass es auf den Anfang zurückgesetzt wird.

HTH

2
Sam Moore

Nun, es gibt einen viel einfacheren Weg, dies zu tun ... Wenn Sie den Link für das Einbetten von Youtube-Videos verwenden, scrollen Sie ein wenig nach unten, und Sie werden einige Optionen sehen: IFrame-Einbettung, alte Einbettung, verwandte Videos verwenden usw. Wählen Sie dort Use old embed link . Dies löst das Problem.

2
santo101

Eigentlich benötigen Sie nur Javascript und bauen die Einbettung des Youtube-Videos mit swfobject google library korrekt auf.

Dies ist ein Beispiel

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

Danach können Sie diese Funktionen aufrufen:

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

Ich habe dies für alle modernen Browser, einschließlich IE9 | IE8 | IE7, erhalten. Mit dem folgenden Code wird Ihr YouTube-Video in einem jQuery-UI-Dialogmodal geöffnet. Das Video wird automatisch beim Start des Dialogfelds um 0:00 Uhr abgespielt und beim Schließen des Dialogfelds angehalten.

<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

wenn Sie manchmal playerID.stopVideo () verwenden; funktioniert nicht, hier ist ein Trick,

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