3

ajax-tabs を含む Web ページを開発しようとしています。タブ セクションでは、galleryview スライダーを使用しています。5 つのタブがあります。最初のタブには画像ギャラリーが含まれ、次のタブにはビデオ ギャラリーが含まれ、3 番目と 4 番目のタブにはテキストが含まれ、最後のタブには画像ギャラリーが含まれます。

私の問題は、あるタブから別のタブに切り替えると、現在再生中の 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>

4

1 に答える 1

0

このコードを使用して次のビデオをクリックすると

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

最初の動画から 2onclick番目の動画のタブの 2 番目の動画に移動する場合は、次のように試してください

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

注：Jqueryを使用しています

于 2012-08-06T13:51:21.300 に答える