javascript - 如何停止嵌入 iframe 播放的 youtube 视频， slider 旋转时以及选项卡处于非事件状态时？

Question

我正在尝试开发一个包含 ajax-tabs 的网页。在选项卡部分，我使用的是 galleryview slider 。有 5 个选项卡；第一个选项卡包含一个图片库，下一个选项卡包含一个视频库，第三个和第四个包含文本，最后一个选项卡包含图片库。

我的问题是，当我从一个选项卡切换到另一个选项卡时，当前正在播放的 YouTube 视频不会停止播放。我尝试了 YouTube api，但它不起作用。

如果我将表单视频标签切换到画廊/个人资料/广告标签，视频不会停止。请提供解决方案。我将感谢您的帮助。

这是我的代码

    <div class="tabs">
      <ul class="tabNavigation">
        <li><a class="selected" href="#first">Gallery</a></li>
        <li><a class="" href="#second">VIDEOS</a></li>
        <li><a class="" href="#third">PROFILE</a></li>
        <li><a class="" href="#fourth">FILMOGRAPHY</a></li>
        <li><a class="" href="#fifth">ADS &amp; EVENTS</a></li>
      </ul>

    <!--FIRST SECTION START-->

    <div style="display: block; padding:0px; width:478px;" id="first">

     <div id="gallery_wrap"> 
<div class="galleryview"> 
<div id="photos">

<div class="panel">
 <img src="Profile/big/slide-d01.jpg"  />
</div>
<div class="panel">
 <img src="Profile/big/slide-d02.jpg" />
</div>

<div class="panel">
<img src="Profile/big/slide-d03.jpg" />
</div>


 <div class="slider-bg">
 <ul class="filmstrip"> 
      <li><img src="Profile/thumb/sd1.jpg" alt="" /></li> 
      <li><img src="Profile/thumb/sd2.jpg" alt="" /></li> 
      <li><img src="Profile/thumb/sd3.jpg" alt="" /></li> 

</ul>
</div> 
</div><!--photos--> 
</div><!--galleryview--> 
 </div> <!--gallerywrap-->       
  </div><!--first-->
    <div class="clear"></div>
    <!--FIRST SECTION END-->



    <!--SECOND SECTION START-->


<div id="second"> 
<div id="gallery_wrap"> 
<div id="photos1" class="galleryview"> 

<div class="panel">
<iframe width="454" height="253" src="http://www.youtube.com/embed/rVv9y6J84q8?HD=1;rel=0;showinfo=0&enablejsapi=1&playerapiid=ytplayer" frameborder="0" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" ></iframe>
</div>

    <div class="panel">
<iframe width="454" height="253" src="http://www.youtube.com/embed/BcwVZTWu9sU?HD=1;rel=0;showinfo=0;enablejsapi=1&playerapiid=ytplayer" frameborder="0" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" ></iframe>
</div>

    <div class="panel">
<iframe  width="454" height="253" src="http://www.youtube.com/embed/DwjbC1z2yjw?HD=1;rel=0;showinfo=0;enablejsapi=1&playerapiid=ytplayer"
    type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always"  frameborder="0" ></iframe>
</div>


<div class="slider-bg">
<ul class="filmstrip"> 
    <li><img src="Profile/thumb/gopichand.png" alt="" /></li> 
    <li><img src="Profile/thumb/manoj.png" alt="" /></li> 
    <li><img src="Profile/thumb/vikram.png" alt="" /></li> 

</ul>
</div>

</div><!--photos--> 
</div><!--gallerywrap-->  

    </div><!--second-->

    <!--SECOND SECTION END-->

    <!--THRID SECTION START-->

    <div style="display: none;" id="third">

    <p> 'Fresh Face title'.</p>
    <p>Born on February 14 1990 in Delhi, </p>
    <p>She made it to top 10 finalists and went on to become a model. </p>
    <p> opposite Vikram.</p>

    </div>

    <!--THRID SECTION END-->

    <!--FOURTH SECTION START-->

    <div style="display: none;" id="fourth">

    <p>film Vedam (2010).</p>
            <span><a href="" target="_blank">More>></a></span>


    </div>

    <!--FOURTH SECTION END-->

    <!--FIFTH SECTION START-->

    <div style="display: none;" id="fifth">
     <!--
   <p>It is a long established fact that a reader will be distracted by the readable </p> -->

    </div>

    <!--FIFTH SECTION END-->


</div>


<!-- profileright-sec End --></div>

Answer 1

当您使用此代码点击下一个视频时

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

如果您要将第一个视频切换到第二个视频标签的 onclick 尝试这样

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

注意:它使用了 Jquery