Остановить YouTube видео с JQuery?

Question

У меня есть созданный мной ползунок jquery, в основном только три панели, которые скользят, применяя отрицательные левые CSS-значения. Прекрасно работает, но у меня есть видео на одном слайде YouTube, которое не останавливается, когда я слайд. Я пробовал display: none и Visibility: hidden, который работает во всех браузерах, кроме IE, в IE звук продолжается.

Есть ли простой способ убить видео с помощью jquery?

Answer 1

Это простое, элегантное решение, которое работает во всех браузерах:

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

Answer 2

из API документов :

player.stopVideo()

так в jQuery:

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

Answer 3

1.включить

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

2.Добавьте свой iframe на YouTube.

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

3.магическое время.

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

Answer 4

Для начала видео

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

Для остановки видео

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

Возможно, вы захотите заменить "& autoplay = 1" на "? Autoplay = 1", если нет дополнительных параметров

работает как для Vimeo, так и для YouTube в FF и Chrome

Answer 5

У меня раньше была эта проблема, и я пришел к выводу, что единственный способ остановить видео в IE - это удалить его из DOM.

Answer 6

Я столкнулся с той же проблемой. После многих альтернативных действий я просто сбросил embed src = "" с тем же URL.

Фрагмент кода:

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

Мне удалось, по крайней мере, остановить воспроизведение видео, когда я его скрываю. :-)

Answer 7

Мое решение, которое работает для современного формата YouTube embed, выглядит следующим образом.

Предполагая, что iframe, в котором воспроизводится ваше видео, имеет id="#video", этот простой бит Javascript сделает эту работу.

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

});

Я видел предлагаемые решения этой проблемы, связанные с использованием YouTube API, но если ваш сайт не является сайтом https, или ваше видео встроено с использованием современного формата, рекомендованного YouTube, или если у вас есть no-cookies опция установлена, тогда эти решения не работают , и вместо вашего видео вы получаете эффект " TV на мертвый канал ".

Я проверял вышеупомянутое на каждом браузере, на котором мог положиться, и он работает очень надежно.

Answer 8

если у вас есть свойство autoplay в iframe src, перезагрузка не поможет src attr / prop, поэтому вы должны заменить autoplay = 1 на autoplay = 0

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

  stopVideo($('#video'));

Answer 9

К сожалению, если атрибут id тега object не существует, IE / play / stop / pauseVideo () не работают.

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

Попробуй!

Answer 10

Мне потребовалось немного разведки, чтобы выяснить это, но я остановился на этой кросс-браузерной реализации:

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

По сути, он открывает мой лайтбокс и заполняет мой атрибут src, а при закрытии просто удаляет значение src (затем заново заполняет его при открытии).