Question

我在我的引导旋转木马的一张幻灯片上有一个视频，需要它在视频播放时暂停。但是，只要鼠标悬停在幻灯片上，它就不会暂停。有什么建议吗？

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

Answer 1

第一次播放视频时，您可以尝试暂停旋转木马。在嵌入代码下方添加此项。

<script>
// embed code here

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

检查控制台以查看该消息是否即将发布。

twitter bootstrap carousel暂停鼠标悬停

1 个答案: