如何防止在youtube iFrame播放时Bootstrap轮播移动

Question

我正在将Twitter视频添加到我的Twitter Bootstrap轮播中。问题是它在视频中间移动并且看起来很难看，所以我想在iFrame点击（播放）上停止它。我尝试添加以下内容......

$(function() {
  $("#movie-frame").bind('click', function(event) {
    $('.carousel').carousel('pause')
    alert("iframe clicked");
  });
});
//in jade
iframe#movie-frame(frameborder="0", height="100%", width="100%", src="url")

这当然不起作用，因为iFrames对点击事件不起作用。还有另一种方法可以实现这个目标吗？

JSFiddle example *电影是最后一个条目

Answer 1

对于 YouTube 视频，您可以使用API并关注Get started。

所以播放器的代码看起来像（上面链接中的例子）：

var player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '390',
    width: '640',
    videoId: 'M7lc1UVf-VE',
    events: {
      'onStateChange': function (event){
          switch(event.data){
          }
      }
    }
  });
}

玩家可以拥有以下状态：

• -1（未启动）
• 0（已结束）
• 1（正在播放）
• 2（暂停）
• 3（缓冲）
• 5（视频提示）。

在每个州，您可以添加自定义行为。

修改

jsFiddle

中的示例

<强> HTML：

<div class="car col-xs-12">
    <div id="carousel-example-generic" data-ride="carousel" class="carousel slide">
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class=""></li>
            <li data-target="#carousel-example-generic" data-slide-to="1" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="NaN" class=""></li>
        </ol>
        <div class="carousel-inner">
            <div class="item">
                <div class="top-bumper"></div>
                <a href="#Music">
                    <img src="http://www.recorddept.com/wp-content/uploads/2010/01/WoodyPines%E2%80%93CountingAlligators.jpeg"><div class="carousel-caption">Music</div>
                </a></div>
            <div class="item active">
                <div class="top-bumper"></div>
                <a href="#Vinyl">
                    <img src="http://www.clker.com/cliparts/8/9/f/1/1317521544340515496_45_record_album-hi.png"><div class="carousel-caption">Vinyl</div>
                </a></div>
            <div class="item">
                <div class="background" id="player">
                    <div class="carousel-caption">Video</div>
                </div>
            </div>
        </div>
        <a href="#carousel-example-generic" data-slide="prev" class="left carousel-control"><span class="glyphicon glyphicon-chevron-left"></span></a><a href="#carousel-example-generic" data-slide="next" class="right carousel-control"><span class="glyphicon glyphicon-chevron-right"></span></a>
        <div class="scroll-area"><a href="#qoutes" class="scrollDown"><i class="fa fa-angle-down fa-4x"></i></a></div>
    </div>
</div>

<强> JavaScript的：

<script type="text/javascript">
    // 2. This code loads the IFrame Player API code asynchronously.
    var tag = document.createElement('script');

    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    var player;
    function onYouTubeIframeAPIReady() {

        player = new YT.Player('player', {         
            videoId: 'tZ5f3IZ6xlU',
            events: {
                'onStateChange': onPlayerStateChange
            }
        });
    }

    var done = false;
    function onPlayerStateChange(event) {
        switch(event.data){
            case 1:
                console.log("playing");
                break;
            default:
                console.log("otherwise");
                break;
        }
    }
    function stopVideo() {
        player.stopVideo();
    }
</script>

Answer 2

检查此代码。

function onPlayerStateChange(event) {
     if(event.data== YT.PlayerState.PLAYING) {
       $("#movie-frame").carousel('pause');
       console.log('stop carousel');}// Stop the carousel, if video is playing
     else {
       $("#movie-frame").carousel('cycle');
        // console.log('play carousel'); // Otherwise, start it
    }

    if(event.data== YT.PlayerState.ENDED) {
        // player.playVideo(); 
       $("#movie-frame").carousel('next');
  }
}