2014-02-16 156 views
0

我在自舉旋轉木馬的一張幻燈片上有一段視頻,需要在視頻播放時暫停。但是,只要鼠標懸停在幻燈片上,它不會暫停。有什麼建議麼?twitter bootstrap旋轉木馬不會在鼠標懸停時暫停

的Javascript:

$(document).ready(function(){ 
    $('#myCarousel').carousel({ 
     interval: 5000, 
     pause: "hover" 
    }); 
}); 

HTML:

<div id="myCarousel" class="carousel slide hidden-xs" data-ride="carousel"> 
     <!-- Indicators --> 
     <ol class="carousel-indicators"> 
     <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
     <li data-target="#myCarousel" data-slide-to="1"></li> 
     <li data-target="#myCarousel" data-slide-to="2"></li> 
     <li data-target="#myCarousel" data-slide-to="3"></li> 
     <li data-target="#myCarousel" data-slide-to="4"></li> 
     </ol> 
     <div class="carousel-inner"> 
     <div class="item active"> 
      <img src="img/gradient.png"> 
      <!-- <img data-src="holder.js/900x500/auto/#3f55c0:#3f55c0/text:First slide" alt="First slide"> --> 
      <div class="container"> 

      <div class="col-md-4 col-md-offset-2 col-sm-5 col-sm-offset-2"> 

       <h1>Better with a buddy.</h1> 
       <h3>Need a truck? Connect with a buddy in the community that can help! </h3> 
       <a href="#download"><button type="button" class="btn btn-success btn-lg try">Try buddyTruk</button></a> 
       <a href="/about"><button type="button" class="btn btn-success btn-lg learn">Learn more</button></a> 
     </div> 
     <div class="col-md-5 col-sm-5"> 
     //VIDEO EMBED 
     <div id="wistia_dgoosakyuf" class="wistia_embed" style="width:405px;height:228px;"><div itemprop="video" itemscope itemtype="http://schema.org/VideoObject"><meta itemprop="name" content="buddyTruk" /><meta itemprop="duration" content="PT1M24S" /><meta itemprop="thumbnailUrl" content="https://embed-ssl.wistia.com/deliveries/9bce8979b8e339f6d582526370a2eb0de307958e.bin" /><meta itemprop="contentURL" content="https://embed-ssl.wistia.com/deliveries/675386773fd5dab2b84da8770c511b8dd16e2e5e.bin" /><meta itemprop="embedURL" content="https://embed-ssl.wistia.com/flash/embed_player_v2.0.swf?2013-10-04&autoPlay=false&banner=true&controlsVisibleOnLoad=true&customColor=fc7f1a&endVideoBehavior=default&fullscreenDisabled=true&hdUrl%5B2pass%5D=true&hdUrl%5Bext%5D=flv&hdUrl%5Bheight%5D=720&hdUrl%5Bsize%5D=27841352&hdUrl%5Btype%5D=hdflv&hdUrl%5Burl%5D=https%3A%2F%2Fembed-ssl.wistia.com%2Fdeliveries%2F5801df83c75112901570dca8a180646a44cc1d07.bin&hdUrl%5Bwidth%5D=1280&mediaDuration=84.0&playButtonVisible=true&showPlayButton=true&showPlaybar=true&showVolume=true&stillUrl=http%3A%2F%2Fembed-0.wistia.com%2Fdeliveries%2F9bce8979b8e339f6d582526370a2eb0de307958e.jpg%3Fimage_crop_resized%3D405x228&unbufferedSeek=false&videoUrl=https%3A%2F%2Fembed-ssl.wistia.com%2Fdeliveries%2F675386773fd5dab2b84da8770c511b8dd16e2e5e.bin" /><meta itemprop="uploadDate" content="2014-02-16T19:35:41Z" /><object id="wistia_dgoosakyuf_seo" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" style="display:block;height:228px;position:relative;width:405px;"><param name="movie" value="https://embed-ssl.wistia.com/flash/embed_player_v2.0.swf?2013-10-04"></param><param name="allowfullscreen" value="true"></param><param name="allowscriptaccess" value="always"></param><param name="bgcolor" value="#000000"></param><param name="wmode" value="opaque"></param><param name="flashvars" value="autoPlay=false&banner=true&controlsVisibleOnLoad=true&customColor=fc7f1a&endVideoBehavior=default&fullscreenDisabled=true&hdUrl%5B2pass%5D=true&hdUrl%5Bext%5D=flv&hdUrl%5Bheight%5D=720&hdUrl%5Bsize%5D=27841352&hdUrl%5Btype%5D=hdflv&hdUrl%5Burl%5D=https%3A%2F%2Fembed-ssl.wistia.com%2Fdeliveries%2F5801df83c75112901570dca8a180646a44cc1d07.bin&hdUrl%5Bwidth%5D=1280&mediaDuration=84.0&playButtonVisible=true&showPlayButton=true&showPlaybar=true&showVolume=true&stillUrl=http%3A%2F%2Fembed-0.wistia.com%2Fdeliveries%2F9bce8979b8e339f6d582526370a2eb0de307958e.jpg%3Fimage_crop_resized%3D405x228&unbufferedSeek=false&videoUrl=https%3A%2F%2Fembed-ssl.wistia.com%2Fdeliveries%2F675386773fd5dab2b84da8770c511b8dd16e2e5e.bin"></param><embed src="https://embed-ssl.wistia.com/flash/embed_player_v2.0.swf?2013-10-04" allowfullscreen="true" allowscriptaccess="always" bgcolor=#000000 flashvars="autoPlay=false&banner=true&controlsVisibleOnLoad=true&customColor=fc7f1a&endVideoBehavior=default&fullscreenDisabled=true&hdUrl%5B2pass%5D=true&hdUrl%5Bext%5D=flv&hdUrl%5Bheight%5D=720&hdUrl%5Bsize%5D=27841352&hdUrl%5Btype%5D=hdflv&hdUrl%5Burl%5D=https%3A%2F%2Fembed-ssl.wistia.com%2Fdeliveries%2F5801df83c75112901570dca8a180646a44cc1d07.bin&hdUrl%5Bwidth%5D=1280&mediaDuration=84.0&playButtonVisible=true&showPlayButton=true&showPlaybar=true&showVolume=true&stillUrl=http%3A%2F%2Fembed-0.wistia.com%2Fdeliveries%2F9bce8979b8e339f6d582526370a2eb0de307958e.jpg%3Fimage_crop_resized%3D405x228&unbufferedSeek=false&videoUrl=https%3A%2F%2Fembed-ssl.wistia.com%2Fdeliveries%2F675386773fd5dab2b84da8770c511b8dd16e2e5e.bin" name="wistia_dgoosakyuf_html" style="display:block;height:100%;position:relative;width:100%;" type="application/x-shockwave-flash" wmode="opaque"></embed></object><noscript itemprop="description"><p>buddyTruk is a mobile app for social hauling; connecting you with a local driver and their vehicle to please your moving needs.</p></noscript></div></div> 
     <script charset="ISO-8859-1" src="//fast.wistia.com/assets/external/E-v1.js"></script> 
     <script> 
     wistiaEmbed = Wistia.embed("dgoosakyuf"); 
     </script> 
     <script charset="ISO-8859-1" src="//fast.wistia.com/embed/medias/dgoosakyuf/metadata.js"></script> 

     </div> 
     </div> 
    </div> 

網站鏈接:http://www.buddytruk.com/temp

+0

奇怪......你的代碼看起來不錯。可以肯定的是,儘管您可以嘗試將雙引號更改爲單引號,並且可能會將引導程序更新爲最新的引導程序,但出現了錯誤修復? 3.0.1到3.1.1在你的情況。 – Mediabeastnz

+0

@Myles所以它可以工作,只要我向下滾動頁面並返回到它,但是,初始懸停不會停止轉換的傳送帶。有沒有辦法讓視頻啓動時轉盤自動暫停? –

回答

0

你可以嘗試在視頻播放的第一次暫停轉盤。在嵌入代碼下方添加此代碼。

<script> 
// embed code here 

wistiaEmbed.bind("play", function() { 
    $('#myCarousel').carousel('pause'); 
    console.log('Video is playing, stopping carousel'); 
}); 
</script> 

檢查控制檯以查看該消息是否傳出。