Question

我正在使用bootstrap轮播来创建视频滑块。当我点击旋转木马控件进入下一张幻灯片时，我希望视频暂停。 Arte有什么解决方案吗？

我尝试了以下代码，但它只适用于滑块中的第一个视频：

 $('.carousel-control-next-icon').click(function(){
    $('.youtube-video')[0].contentWindow.postMessage('{"event":"command","func":"' + 'pauseVideo' + '","args":""}', '*');
})

.youtube-video是我为滑块中的每个iframe标签提供的一个类。

HTML代码如下：

<div class="position-relative">
        <div class="container-video active">
            <div class="row justify-content-center">
                <div class="col-md-7 col-12 position-initial">>
                    <div id="video-carousel-example1" class="carousel slide carousel-fade" data-interval="false">
                        <!--Slides-->
                        <div class="carousel-inner" role="listbox">
                            <!-- First slide -->
                            <div class="carousel-item active">
                                <div class="view">
                                    <div class="embed-responsive embed-responsive-16by9 video-fluid">
                                        <iframe class="youtube-video" width="560" height="315"
                                                src="https://www.youtube.com/embed/..."
                                                frameborder="0" allow="autoplay; encrypted-media"
                                                allowfullscreen>
                                        </iframe>
                                    </div>
                                    <div class="carousel-caption d-none d-md-block">
                                        <p class="f-green"> Video 1: Hier steht dann eine kurze Beschreibung, zur jeweiligen Person, die spricht. Das könnte dann zum Beispiel so aussehen: Umberto (91), hat sein Leben auf den Feldern der Olivenbäume verbracht. Als Kind musst er seinem Vater helfen usw.</p>
                                    </div>
                                </div>
                            </div>
                            <!-- Second slide -->
                            ...
                            <!-- Third slide -->
                            ...
                        </div>
                        <!--/.Slides-->
                        <!-- Controls -->
                        <div class="position">
                            <a class="carousel-control-prev" href="#video-carousel-example1" role="button"
                               data-slide="prev"
                               href="javascript:void callPlayer(&quot;test&quot;,&quot;stopVideo&quot;)">
                                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                <span class="sr-only">Previous</span>
                            </a>
                            <a class="carousel-control-next" href="#video-carousel-example1" role="button"
                               data-slide="next"
                               href="javascript:void callPlayer(&quot;test&quot;,&quot;stopVideo&quot;)">
                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                <span class="sr-only">Next</span>
                            </a>
                            <!--/.Controls-->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

如果有人能帮助我解决这个问题，我将非常感激。

提前致谢。

Bootstrap视频滑块：点击暂停视频

0 个答案: