如何在 jQuery 中以编程方式停止 YouTube 视频

Question

我正在使用 jQueryMobile 开发一个简单的 Web 应用程序，我可以在包含 Youtube 视频的不同页面之间滑动，

我遇到的问题很简单，我想停止一个 youtube 视频，我滑动转到下一页，

否则用户将同时播放两个 YouTube 视频。

这是代码和演示：

这是我很棒的完整代码：

var i =1;
 $("body").on("swipeleft",function(){
 if (i<2) {
 i++;
 
   $.mobile.changePage('#p'+i, {
            transition: "slide"
        });
      
        
               }
     

  });


   $("body").on("swiperight",function(){
   if (i>1) {
   i--;
   $.mobile.changePage('#p'+i, {
            transition: "slide",
            reverse: true 
        });
        }

  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div data-role="page" id="p1">

<iframe width="560" height="315" src="https://www.youtube.com/embed/X9_n8jakvWU" frameborder="0" allowfullscreen></iframe>
 
</div>

<div data-role="page" id="p2">

<iframe width="560" height="315" src="https://www.youtube.com/embed/UecPqm2Dbes" frameborder="0" allowfullscreen></iframe>
 
</div>

Answer 1

鉴于您使用的 jQuery 旧版本，我假设您使用的是 jQuery Mobile 1.3 而不是 1.4。

您可以使用 pagebeforehide 事件获取您要离开的页面的 iframe，然后快速将 iframe 的 src 设置为空，然后返回视频 url。这将停止播放视频。

var TheFrame;
$(document).on( "pagebeforehide", function( event, data ) { 
    TheFrame = $(event.target).find("iframe");
    setTimeout(StopVideo, 500);
});

function StopVideo(){
    var vid  = TheFrame.prop("src");
    TheFrame.prop("src", "");
    TheFrame.prop("src", vid);    
}

setTimeout 允许在干扰 iframe src 之前完成幻灯片转换。

Working DEMO

如果您使用的是 jQM 1.4，则可以改用 pagecontainer widget events：

var TheFrame;
$(document).on( "pagecontainerbeforehide", function( event, ui ) { 
    TheFrame = ui.prevPage.find("iframe");
    setTimeout(StopVideo, 500);
});

function StopVideo(){
    var vid  = TheFrame.prop("src");
    TheFrame.prop("src", "");
    TheFrame.prop("src", vid);    
}

如何在 jQuery 中以编程方式停止 YouTube 视频

How to stop youtube video programmatically in jQuery

youtube-api

jquery-mobile

youtube-javascript-api