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

Question

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

我

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

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

这是代码和演示：

JSFiddle 演示 + 完整代码

这是我很棒的完整代码：

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 之前完成幻灯片切换。

工作演示

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

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