Question

我做了一个带bootstrap的网站。在那里我制作了一个视频滑块。现在我的问题是当我滑到下一个滑块时，第一个视频不会停止播放。

当我滑动到下一个视频滑块时，如何停止视频？

我尝试使用JS函数：

function callPlayer(frame_id, func, args) {
if (window.jQuery && frame_id instanceof jQuery) frame_id = frame_id.get(0).id;
var iframe = document.getElementById(frame_id);
if (iframe && iframe.tagName.toUpperCase() != 'IFRAME') {
    iframe = iframe.getElementsByTagName('iframe')[0];
}
if (iframe) {
    // Frame exists,
    iframe.contentWindow.postMessage(JSON.stringify({
        "event": "command",
        "func": func,
        "args": args || [],
        "id": frame_id
    }), "*");
}

HTML代码就是这个：

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>FactAttack</title>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
          integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

    <!-- Custom styles for this template -->
    <link href="css/layout.css" rel="stylesheet">
    <link href="css/half-slider.css" rel="stylesheet">

    <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
    <link rel="icon" href="img/favicon.ico" type="image/x-icon">

</head>

<body>


<!-- Navigation -->

<a href="index.html"><img class="Logo" src="img/logo.svg" width="18%" alt="Fact Attack"></a>
<nav class="navbar navbar-expand-lg navbar-dark">
    <div class="container-nav ml-auto">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"
                aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="index.html">Home
                        <span class="sr-only">(current)</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="html/project.html">Das Projekt</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="html/aboutus.html">Über uns</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<div class="position-relative">
    <div class="container-video pt-3">
        <div class="row">
            <div class="col-12 position-initial">
                <header>
                    <!--Carousel Wrapper-->
                    <div id="video-carousel-example2" class="carousel slide carousel-fade" data-interval="false">
                        <!--Indicators-->
                        <ol class="carousel-indicators">
                            <li data-target="#video-carousel-example2" data-slide-to="0" class="active"></li>
                            <li data-target="#video-carousel-example2" data-slide-to="1"></li>
                            <li data-target="#video-carousel-example2" data-slide-to="2"></li>
                            <li data-target="#video-carousel-example2" data-slide-to="3"></li>
                            <li data-target="#video-carousel-example2" data-slide-to="4"></li>
                            <li data-target="#video-carousel-example2" data-slide-to="5"></li>
                            <li data-target="#video-carousel-example2" data-slide-to="6"></li>
                            <li data-target="#video-carousel-example2" data-slide-to="7"></li>
                            <li data-target="#video-carousel-example2" data-slide-to="8"></li>
                            <li data-target="#video-carousel-example2" data-slide-to="9"></li>
                        </ol>
                        <!--/.Indicators-->

                        <!--Slides-->
                        <div class="carousel-inner" role="listbox">
                            <!-- First slide -->
                            <div class="carousel-item active">
                                <!--Mask color-->
                                <div class="view">
                                    <!--Video source-->
                                    <div class="embed-responsive embed-responsive-16by9 video-fluid" id="test">
                                        <iframe width="560" height="315"
                                                src="https://www.youtube.com/embed/KYqDtHu6S24?enablejsapi=1&;modestbranding=1&;autohide=1&;rel=0;&controls=0;"
                                                frameborder="0" allow="autoplay; encrypted-media"
                                                allowfullscreen></iframe>
                                    </div>
                                    <div class="mask rgba-indigo-light"></div>

                                </div>

                                <div class="carousel-caption d-none d-md-block dark"></div>

                                <!-- VIDEOBESCHRIFTUNG
                                <div class="carousel-caption">
                                    <div class="animated fadeInDown">
                                        <h3 class="h3-responsive">Light mask</h3>
                                    </div>
                                </div>
                               -->

                            </div>
                            <!-- /.First slide -->

                            <!-- Second slide -->
                            <div class="carousel-item">
                                <!--Mask color-->
                                <div class="view">
                                    <!--Video source-->
                                    <div class="embed-responsive embed-responsive-16by9 video-fluid">
                                        <iframe width="560" height="315"
                                                src="https://www.youtube.com/embed/4e8qaxR_gLU?modestbranding=1&;autohide=1&;rel=0;&controls=0;"
                                                frameborder="0" allow="autoplay; encrypted-media"
                                                allowfullscreen></iframe>
                                    </div>
                                    <div class="mask rgba-indigo-light"></div>
                                </div>
                                <div class="carousel-caption d-none d-md-block dark"></div>
                            </div>
                            <!-- /.Second slide -->

                            <!-- Third slide -->
                            <div class="carousel-item">
                                <!--Mask color-->
                                <div class="view">
                                    <!--Video source-->
                                    <div class="embed-responsive embed-responsive-16by9 video-fluid">
                                        <iframe width="560" height="315"
                                                src="https://www.youtube.com/embed/KYqDtHu6S24?modestbranding=1&;autohide=1&;rel=0;&controls=0;"
                                                frameborder="0" allow="autoplay; encrypted-media"
                                                allowfullscreen></iframe>
                                    </div>
                                    <div class="mask rgba-indigo-light"></div>
                                </div>
                                <div class="carousel-caption d-none d-md-block dark"></div>
                            </div>
                            <!-- /.Third slide -->

                            <!-- Fourth slide -->
                            <div class="carousel-item">
                                <!--Mask color-->
                                <div class="view">
                                    <!--Video source-->
                                    <div class="embed-responsive embed-responsive-16by9 video-fluid">
                                        <iframe width="560" height="315"
                                                src="https://www.youtube.com/embed/4e8qaxR_gLU?modestbranding=1&;autohide=1&;rel=0;&controls=0;"
                                                frameborder="0" allow="autoplay; encrypted-media"
                                                allowfullscreen></iframe>
                                    </div>
                                    <div class="mask rgba-indigo-light"></div>
                                </div>
                                <div class="carousel-caption d-none d-md-block dark"></div>
                            </div>
                            <!-- /.Fourth slide -->

                            <!-- Fifth slide -->
                            <div class="carousel-item">
                                <!--Mask color-->
                                <div class="view">
                                    <!--Video source-->
                                    <div class="embed-responsive embed-responsive-16by9 video-fluid">
                                        <iframe width="560" height="315"
                                                src="https://www.youtube.com/embed/KYqDtHu6S24?modestbranding=1&;autohide=1&;rel=0;&controls=0;"
                                                frameborder="0" allow="autoplay; encrypted-media"
                                                allowfullscreen></iframe>
                                    </div>
                                    <div class="mask rgba-indigo-light"></div>
                                </div>
                                <div class="carousel-caption d-none d-md-block dark"></div>
                            </div>
                            <!-- /.Fifth slide -->

                            <!-- Sixth slide -->
                            <div class="carousel-item">
                                <!--Mask color-->
                                <div class="view">
                                    <!--Video source-->
                                    <div class="embed-responsive embed-responsive-16by9 video-fluid">
                                        <iframe width="560" height="315"
                                                src="https://www.youtube.com/embed/4e8qaxR_gLU?modestbranding=1&;autohide=1&;rel=0;&controls=0;"
                                                frameborder="0" allow="autoplay; encrypted-media"
                                                allowfullscreen></iframe>
                                    </div>
                                    <div class="mask rgba-indigo-light"></div>
                                </div>
                                <div class="carousel-caption d-none d-md-block dark"></div>
                            </div>
                            <!-- /.Sixth slide -->

                            <!-- Seventh slide -->
                            <div class="carousel-item">
                                <!--Mask color-->
                                <div class="view">
                                    <!--Video source-->
                                    <div class="embed-responsive embed-responsive-16by9 video-fluid">
                                        <iframe width="560" height="315"
                                                src="https://www.youtube.com/embed/KYqDtHu6S24?modestbranding=1&;autohide=1&;rel=0;&controls=0;"
                                                frameborder="0" allow="autoplay; encrypted-media"
                                                allowfullscreen></iframe>
                                    </div>
                                    <div class="mask rgba-indigo-light"></div>
                                </div>
                                <div class="carousel-caption d-none d-md-block dark"></div>
                            </div>
                            <!-- /.Seventh slide -->

                            <!-- Eighth slide -->
                            <div class="carousel-item">
                                <!--Mask color-->
                                <div class="view">
                                    <!--Video source-->
                                    <div class="embed-responsive embed-responsive-16by9 video-fluid">
                                        <iframe width="560" height="315"
                                                src="https://www.youtube.com/embed/4e8qaxR_gLU?modestbranding=1&;autohide=1&;rel=0;&controls=0;"
                                                frameborder="0" allow="autoplay; encrypted-media"
                                                allowfullscreen></iframe>
                                    </div>
                                    <div class="mask rgba-indigo-light"></div>
                                </div>
                                <div class="carousel-caption d-none d-md-block dark"></div>
                            </div>
                            <!-- /.Eighth slide -->

                            <!-- Ninth slide -->
                            <div class="carousel-item">
                                <!--Mask color-->
                                <div class="view">
                                    <!--Video source-->
                                    <div class="embed-responsive embed-responsive-16by9 video-fluid">
                                        <iframe width="560" height="315"
                                                src="https://www.youtube.com/embed/KYqDtHu6S24?modestbranding=1&;autohide=1&;rel=0;&controls=0;"
                                                frameborder="0" allow="autoplay; encrypted-media"
                                                allowfullscreen></iframe>
                                    </div>
                                    <div class="mask rgba-indigo-light"></div>
                                </div>
                                <div class="carousel-caption d-none d-md-block dark"></div>
                            </div>
                            <!-- /.Ninth slide -->

                            <!-- Tenth slide -->
                            <div class="carousel-item">
                                <!--Mask color-->
                                <div class="view">
                                    <!--Video source-->
                                    <div class="embed-responsive embed-responsive-16by9 video-fluid">
                                        <iframe width="560" height="315"
                                                src="https://www.youtube.com/embed/4e8qaxR_gLU?modestbranding=1&;autohide=1&;rel=0;&controls=0;"
                                                frameborder="0" allow="autoplay; encrypted-media"
                                                allowfullscreen></iframe>
                                    </div>
                                    <div class="mask rgba-indigo-light"></div>
                                </div>
                                <div class="carousel-caption d-none d-md-block"></div>
                            </div>
                            <!-- /.Tenth slide -->

                        </div>
                        <!--/.Slides-->
                        <!-- Controls -->
                        <div class="position">
                            <a class="carousel-control-prev" href="#video-carousel-example2" 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-example2" 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>

                    <!--Carousel Wrapper-->
                </header>


            </div>
        </div>
    </div>
</div>

<!-- Page Content -->
<section class="nippel pt-4 pb-3 mb-5">
    <div class="container col-sm-7 col-l-8">
        <h1>Hast du dich jemals gefragt,... </h1>
        <h2 id="nippel"></h2>
        <p>
            "Hummeli können nicht fliegen.” Das ist eine bekannte Aussage. Und dennoch sehen wir die dicken Brummer in
            der Luft. Was steckt dahinter?

        </p>
    </div>
</section>

<section class="hummel pt-4 pb-3">
    <div class="container col-sm-8 col-l-6">
        <h1>Hast du dich jemals gefragt, ...</h1>
        <h2 id="hummel"></h2>
        <p>
            Hummeli können nicht fliegen.” Das ist eine bekannte Aussage. Und dennoch sehen wir die dicken Brummer in
            der Luft. Was steckt dahinter?

        </p>
    </div>
</section>

<section class="kitzeln pt-4 pb-3">
    <div class="container col-sm-8 col-l-6">
        <h1>Hast du dich jemals gefragt, ...</h1>
        <h2 id="kitzeln"></h2>
        <p>
            Kitzlig ist praktisch jeder, ob unter den Armen, an den Füssen oder einfach beim Bauch. Dennoch kann man
            sich nicht selber mit seinen Berührungen zum lachen bringen. Wieso ist das aber so?

        </p>
    </div>
</section>

<section class="paris pt-4 pb-3">
    <div class="container col-sm-8 col-l-6">
        <h1>Hast du dich jemals gefragt, ...</h1>
        <h2 id="paris"></h2>
        <p>
            Der Hering ist in der Lage, Geräusche zu erzeugen und auch selbst wahrzunehmen. Dank einer Verbindung von
            der Schwimmblase zum Mittelohr hört er gut. Besonders häufig unterhalten sich Heringe übrigens während der
            Nacht. Nach bisherigen Beobachtungen von Forschern glaubt man, dass Heringe nachts das Pupsen nutzen, um den
            Kontakt zum Schwarm nicht zu verlieren.
            Aber keine Sorge, wenn du einmal auf einen Hering-Schwarm triffst, wirst du nichts riechen, denn da
            Verdauungsgase bei Fischfürzen nicht entstehen, sind die Gespräche wie bei den meisten Menschen auch
            geruchlos.

        </p>
    </div>
</section>

<section class="hering pt-4 pb-3">
    <div class="container col-sm-8 col-l-6">
        <h1>Hast du dich jemals gefragt, ...</h1>
        <h2 id="hering"></h2>
        <p>
            Grundsätzlich weiss man, dass die meisten Fische durch Laute kommunizieren. Doch beim Hering ist das ganz
            anders. Wollt ihr erfahren, wieso Heringe sich beim Reden nicht ins Gesicht sehen?

        </p>
    </div>
</section>

<section class="ohrwurm pt-4 pb-3">
    <div class="container col-sm-8 col-l-6">
        <h1>Hast du dich jemals gefragt, ...</h1>
        <h2 id="ohrwurm"></h2>
        <p>
            Einen Song gehört und schon läuft er einem während dem ganzen Tag hinterher. Egal was mach macht, man hört
            diesen Song im Kopf in Endlosschleife. Wir finden heraus wieso das so ist und wie man sich helfen kann.

        </p>
    </div>
</section>

<section class="zwieback py-5">
    <div class="container col-sm-8 col-l-6">
        <h1>Hast du dich jemals gefragt, ...</h1>
        <h2 id="zwieback"></h2>
        <p>
            Zwieback ist ein Gebäck, dass wir alle kennen und vor allem wenn wir krank sind, lieben lernen. Doch wer von
            uns weiss, woher der Name Zwieback kommt und wie er hergestellt wird?

        </p>
    </div>
</section>

<section class="mms py-5">
    <div class="container col-sm-8 col-l-6">
        <h1>Hast du dich jemals gefragt, ...</h1>
        <h2 id="mms"></h2>
        <p>
            Leckereien im Kino, schnausen vor dem Fernseher oder Snacks während der Vorlesung. Wir alle lieben M&M’s.
            Wieso wurden sie aber ursprünglich erfunden?

        </p>
    </div>
</section>

<section class="internet py-5">
    <div class="container col-sm-8 col-l-6">
        <h1>Hast du dich jemals gefragt, ...</h1>
        <h2 id="internet"></h2>
        <p>
            Jeder kennt es, jeder braucht es. Die Rede ist vom Internet, welches wir heute täglich für die
            verschiedensten Aktionen brauchen. Aber seit wann steht es uns eigentlich zur Verfügung?

        </p>
    </div>
</section>

<section class="zebras py-5">
    <div class="container col-sm-8 col-l-6">
        <h1>Hast du dich jemals gefragt, ...</h1>
        <h2 id="zebras"></h2>
        <p>
            Zebras sind faszinierende Tiere. Nicht zuletzt wegen den Streifen, die ihr Fell zieren. Aber welche Farbe
            haben sie eigentlich? Sind sie schwarz oder weiss?


        </p>
    </div>
</section>

<!-- Footer -->
<footer class="py-5">
    <div class="container">
        <p class="m-0 text-center text-white">Copyright &copy; FactAttack 2018</p>
    </div>
    <!-- /.container -->
</footer>

<!-- Bootstrap core JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/typeit@5.10.1/dist/typeit.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
        integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
        crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"
        integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T"
        crossorigin="anonymous"></script>
<script src="js_jquery/style.js"></script>

<a href="javascript:void callPlayer(&quot;test&quot;,&quot;stopVideo&quot;)">Stop</a> - Hover over the links to see the
called function
<br/>

</body>
</html>

＆＃13;

正文部分中的最后3行是视频停止的。我在我的内容下创建了一个停止按钮，并将其链接到第一个视频。所以，现在，如果我播放视频并点击“＃34;停止＆＃34;按钮下面，视频停止。但是我怎么能包含这个代码（或者只是这个JS：＆＃34; javascript：void callPlayer（＆＃34; test＆＃34;，＆＃34; stopVideo＆＃34;）＆＃34; ）进入我的指标和箭头部分，以便当我滑动到下一个时当前视频停止？

感谢您的帮助！

BR Jasmin

Boostrap Slider - 在JS中滑动时捕获视频

0 个答案: