Question

我有一个我构建的jquery滑块，基本上只有三个pannels通过应用负的左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 docs：

player.stopVideo()

所以在jQuery中：

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

Answer 3

1.include

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

2.添加你的youtube iframe。

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

如果没有其他参数，您可能需要将“＆amp; autoplay = 1”替换为“？autoplay = 1”

适用于FF＆amp;的vimeo和youtube铬

Answer 5

之前我遇到过这个问题，我得出的结论是，在IE中停止视频的唯一方法是将其从DOM中删除。

Answer 6

我遇到了同样的问题。在我做了很多替代方案后，只需使用相同的URL重置embed src =“”。

代码段：

  $("#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选项，则这些解决方案无法正常工作并且您将“电视设置为死频道”效果而非您的视频

我已经在我可以放下的每个浏览器上测试了上述内容，并且它非常可靠。

Answer 8

如果你在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属性不存在，播放/停止/暂停视频（）不能通过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>

试试吧！

Answer 10

这适用于YouTube和Vimeo播放器。我基本上只是重置了src属性，所以要注意视频会回到开头。

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是我当前视频的容器 - 因为我在页面上有多个视频，并且它们在运行时通过Drupal视图显示，我不知道他们的id会是什么。因此，我将muy click事件绑定到当前可见的元素，找到它的父元素，并确定它是$ theArticleDiv。

（'。views-field-field-video-1 iframe'）为我找到当前视频的iframe - 特别是现在可见的iframe。 iframe有一个src属性。我只需选择它并将其重置回原来的状态，并自动将视频停止并返回到开始状态。如果我的用户想要暂停和恢复，他们可以在不关闭视频的情况下完成 - 但坦率地说，如果他们关闭了视频，我觉得他们可以接受重置到开头的事实。

HTH

Answer 11

我花了一些时间来探讨这个问题，但我已经确定了这个跨浏览器的实现：

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值（然后在打开时重新填充它）。

Answer 12

嗯，有一个更容易的方法来做到这一点。当您抓取youtube视频的嵌入链接时，向下滚动一下，您会看到一些选项： iFrame嵌入，使用旧嵌入，相关视频等在那里，选择使用旧的嵌入链接。这解决了这个问题。

Answer 13

实际上你只需要javascript并使用swfobject google library

正确构建youtube视频的嵌入

这是一个例子

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

之后你可以调用这个函数：

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

Answer 14

我让它适用于所有现代浏览器，包括IE9 | IE8 | IE7。以下代码将在jQuery UI对话框模式中打开您的YouTube视频，在对话框打开时从0:00自动播放视频，并在关闭对话框时停止视频。

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

Answer 15

如果你有时使用playerID.stopVideo（）;不起作用，这是一个技巧，

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

Answer 16

这对我有用

stopIframeVideo = () => {
  let iframe = $('.video-iframe')
  iframe.each((index) => {
    iframe[index].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');
  })
};

$('.close').click(() => {
    stopIframeVideo()
});

Answer 17

对于那些正在寻找javascript解决方案的人

let iframeDiv = document.getElementById('demoVideo');
                        let video = iframeDiv.src;
                        iframeDiv.src = "";
                        iframeDiv.src = video;

只需将id ='demoVideo'放在您的iframe标记中，对我来说就很好了，您就可以了：）

Answer 18

在嵌入网址的末尾添加以下内容

?enablejsapi=1&version=3&playerapiid=ytplayer

例如 - https://www.youtube.com/embed/wR0jg0eQsZA?enablejsapi=1&version=3&playerapiid=ytplayer"

Answer 19

很简单。

在函数中包含以下行以关闭pop。

$('#youriframeid').remove();

用jquery停止youtube视频？

19 个答案: