Question

我正在使用带有图像的Bootstrap 4轮播并嵌入YouTube视频。我设法在播放视频时暂停幻灯片，并在按下控制按钮时停止视频。虽然通过按下控件观看或停止视频时，轮播周期不再自动工作，必须手动进行。有什么帮助吗？

<!-- Carousel -->
<div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel" data-interval="9000">
    <!--Indicators -->
    <ol class="carousel-indicators_blog">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
    </ol><!-- end .Indicators -->
    <div class="carousel-inner" role="listbox">
        <!-- 01_carousel -->
        <div class="carousel-item active">
            <img src="http://via.placeholder.com/825x464" class="img-fluid" alt="Responsive image">
        </div><!-- end .01_carousel -->
        <!-- 02_carousel -->
        <div class="carousel-item">
            <div  class="embed-responsive embed-responsive-16by9">
                <iframe id="player" src="https://www.youtube.com/embed/brdYAn6EZcU?rel=0&amp;enablejsapi=1&version=3&playerapiid=ytplayer" allowfullscreen></iframe>
            </div><!-- end .embed-responsive -->
        </div><!-- end .02_carousel -->
        <!-- 03_carousel -->
        <div class="carousel-item">
            <img src="http://via.placeholder.com/825x464" class="img-fluid" alt="Responsive image">
        </div><!-- end .03_carousel -->
    </div><!-- end .carousel-inner -->
    <!-- Controls -->
    <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a><!-- end .Control -->
</div><!-- end .myCarousel -->

<script>
var player;
function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        events: {
            'onStateChange': onPlayerStateChange
        }
    });
}

function onPlayerReady(event) {
    event.target.playVideo();
}

var done = false;
function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING && !done) {
        $('#myCarousel').carousel('pause');
        done = true;
    }
}
</script>     

<script>
$('a.carousel-control-prev').click(function(){
$('#player')[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');
});

$('a.carousel-control-next').click(function(){
$('#player')[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');
});
</script>

Answer 1

我今天遇到了同样的问题！

   var done = false;
    function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING) {
            $('#homepage-slider').carousel('pause');
            done = true;

            console.log('play'+YT.PlayerState.PLAYING);
        }
        if (event.data == YT.PlayerState.PAUSED) {
            console.log(YT.PlayerState.PAUSED);
            $('#homepage-slider').carousel('cycle');
        }
  }

Bootstrap 4轮播和YouTube视频

1 个答案: