Question

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

我遇到的问题很简单，我想停止youtube视频发牢骚我转到下一页，

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

这是代码和演示：

这是我非常棒的完整代码：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

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

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

正在使用 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视频

1 个答案: