Приостановить карусель Bootstrap при воспроизведении видео на Youtube

Я сделал карусель с изображениями и видео на Youtube. Даже при воспроизведении видео слайды карусели и при возврате к видео видео все еще воспроизводится.

  1. Я хочу, чтобы карусель останавливалась при воспроизведении видео и продолжалась, если нажимались стрелки или видео заканчивалось.

  2. Остановить видео, если оно воспроизводилось и пользователь нажимал на стрелки карусели.

HTML:

<div id="myCarousel" class="carousel slide" data-ride="carousel" data-pause="hover">

                        <!-- 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>

                        </ol>

                        <!-- Wrapper for slides -->

                        <div class="carousel-inner">
                            <div class="item active">
                                <div id="cal01"></div>
                            </div>

                            <div class="item">
                                <div id="cal02"></div>
                            </div>

                            <div class="item">
                                <iframe src="https://www.youtube.com/embed/pFaJqKqQa2E" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen id="cal3"></iframe>
                            </div>
                        </div>

                        <!-- Left and right controls -->

                        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                            <span class="glyphicon glyphicon-chevron-left"></span>
                            <span class="sr-only">Previous</span>
                        </a>

                        <a class="right carousel-control" href="#myCarousel" data-slide="next">
                            <span class="glyphicon glyphicon-chevron-right"></span>
                            <span class="sr-only">Next</span>
                        </a>
                    </div>
                </div>

Как я могу этого добиться? Я не смог найти ничего похожего на это.


html iframe bootstrap-4 bootstrap-carousel
person Dpka    schedule 22.10.2018    source источник
comment
Возможный дубликат Приостановка карусели Bootstrap при воспроизведении видео   -  person Ismail Farooq    schedule 22.10.2018
comment
@IsmailFarooq Это может помочь во второй части моего вопроса, но как насчет первой части?   -  person Dpka    schedule 22.10.2018
comment
Вот ваш ответ на первую часть stackoverflow.com/questions/8950146/   -  person Ismail Farooq    schedule 22.10.2018

Ответы (1)


arrow_upward
2
arrow_downward

Ваши 2 вопроса были в точности дословно аналогичны тем же вопросам, которые были у меня ранее сегодня~

Чтобы видеоролики Youtube iframe запускали паузу при скольжении карусели всякий раз, когда воспроизводится видео, вам необходимо иметь индикатор того, считается ли видео «воспроизводимым». Вы можете добиться этого, используя функции проигрывателя API Youtube iframe с JavaScript.

Прослушайте события, которые включают эти состояния:

  • YT.PlayerState.PLAYING
  • YT.PlayerState.BUFFERING

А затем управляйте каруселью Bootstrap, скользящей по .carousel('pause') :

Чтобы иметь возможность прослушивать такие события, вы можете добавить в свой JavaScript функцию под названием «onPlayerStateChange» (как описано в API Youtube iframe):

function onPlayerStateChange(event) // triggered everytime ANY iframe video player among the "players" list is played, paused, ended, etc.
{
    // Check if any iframe video is being played (or is currently buffering to be played)
    // Reference: https://developers.google.com/youtube/iframe_api_reference#Events
    if (event.data == YT.PlayerState.PLAYING || event.data == YT.PlayerState.BUFFERING)
    {
        // If any player has been detected to be currently playing or buffering, pause the carousel from sliding
        // .carousel('pause') - Stops the carousel from cycling through items.
        // Reference: https://getbootstrap.com/docs/4.4/components/carousel/#methods
        $('#moviesCarousel').carousel('pause');
    }
    else
    {
        // If there are no currently playing nor buffering videos, resume the sliding of the carousel.
        // This means that once the current video is in a state that is not playing (aside from buffering), either it was:
        //     1. paused intentionally
        //     2. paused as an effect of a slide
        //     3. video has ended
        //     4. wasn't totally played from the start
        //     5. and literally any form where the video timer isn't running ;)
        //     - then the carousel would now resume sliding.
        $('#moviesCarousel').carousel();
    }

Чтобы остановить видео при запуске слайда (если пользователь нажал на предыдущую или следующую стрелку):

// When a slide occurs, pause the current iframe video that is playing
// player.pauseVideo():Void - Pauses the currently playing video.
// Reference: https://developers.google.com/youtube/iframe_api_reference#Playback_controls
$('#moviesCarousel').on('slide.bs.carousel', function(event) {
    // The variable "players" contain each Youtube Player for each iframe video
    // Reference: https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player
    // event.from - The index of the current video (before the slide occurs)
    //            - It is also the index of the corresponding player for the current video
    // Reference: https://getbootstrap.com/docs/4.4/components/carousel/#events
    players[event.from].pauseVideo();
});

Для справки, вот полный рабочий HTML (работает напрямую, никаких изменений не требуется):

<!doctype html>
<html lang="en">
<head>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
    <!-- Buttons for manually sliding the carousel -->
    <div class="btn-group col-lg-8" role="group" aria-label="Carousel controls">
        <button id="prevMovie" type="button" class="btn btn-danger">Prev</button>
        <button id="nextMovie" type="button" class="btn btn-info">Next</button>
    </div>

    <!-- The carousel containing the Youtube iframe videos -->
    <!-- Remember to add the ?enablejsapi=1 in the Youtube embed link as described in: -->
    <!-- https://developers.google.com/youtube/iframe_api_reference#Example_Video_Player_Constructors -->
    <div id="moviesCarousel" class="carousel slide col-lg-8" data-ride="carousel" data-interval="2000">
        <div class="carousel-inner embed-responsive embed-responsive-16by9"> <!-- embed is used for responsive size regardless of device -->
            <div class="carousel-item embed-responsive-item active">
                <iframe id="katniss" src="https://www.youtube.com/embed/v98Rh9qzmPs?enablejsapi=1" allowfullscreen></iframe>
            </div>
            <div class="carousel-item embed-responsive-item">
                <iframe id="rancho" src="https://www.youtube.com/embed/-MlkASchodc?enablejsapi=1" allowfullscreen></iframe>
            </div>
            <div class="carousel-item embed-responsive-item">
                <iframe id="logan" src="https://www.youtube.com/embed/UgJr0bNmTL8?enablejsapi=1" allowfullscreen></iframe>
            </div>
        </div>
    </div>

    <!-- jQuery first, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

    <script>
        $(document).ready(function()
        {
            // Slide the carousel upon button click
            // .carousel('prev') - Cycles to the previous item
            // .carousel('next') - Cycles to the next item.
            // Reference: https://getbootstrap.com/docs/4.4/components/carousel/#methods
            $('#prevMovie').on('click', function() {
                $('#moviesCarousel').carousel('prev');
            });
            $('#nextMovie').on('click', function() {
                $('#moviesCarousel').carousel('next');
            });

            // When a slide occurs, pause the current iframe video that is playing
            // player.pauseVideo():Void - Pauses the currently playing video.
            // Reference: https://developers.google.com/youtube/iframe_api_reference#Playback_controls
            $('#moviesCarousel').on('slide.bs.carousel', function(event) {
                // The variable "players" contain each Youtube Player for each iframe video
                // Reference: https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player
                // event.from - The index of the current video (before the slide occurs)
                //            - It is also the index of the corresponding player for the current video
                // Reference: https://getbootstrap.com/docs/4.4/components/carousel/#events
                players[event.from].pauseVideo();
            });
        });

        // Start of snippet from: https://developers.google.com/youtube/iframe_api_reference
        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 players = []; // would contain 1 player for each iframe video
        function onYouTubeIframeAPIReady()
        {
            var allMovieIframes = document.getElementById("moviesCarousel").getElementsByTagName('iframe');
            for (currentIFrame of allMovieIframes)
            {
                players.push(new YT.Player(
                    currentIFrame.id, // the target iframe video, here it is  either katniss, rancho, or logan
                    { events: { 'onStateChange': onPlayerStateChange } }
                ));
            }
        }
        function onPlayerStateChange(event) // triggered everytime ANY iframe video player among the "players" list is played, paused, ended, etc.
        {
            // Check if any iframe video is being played (or is currently buffering to be played)
            // Reference: https://developers.google.com/youtube/iframe_api_reference#Events
            if (event.data == YT.PlayerState.PLAYING || event.data == YT.PlayerState.BUFFERING)
            {
                // If any player has been detected to be currently playing or buffering, pause the carousel from sliding
                // .carousel('pause') - Stops the carousel from cycling through items.
                // Reference: https://getbootstrap.com/docs/4.4/components/carousel/#methods
                $('#moviesCarousel').carousel('pause');
            }
            else
            {
                // If there are no currently playing nor buffering videos, resume the sliding of the carousel.
                // This means that once the current video is in a state that is not playing (aside from buffering), either it was:
                //     1. paused intentionally
                //     2. paused as an effect of a slide
                //     3. video has ended
                //     4. wasn't totally played from the start
                //     5. and literally any form where the video timer isn't running ;)
                //     - then the carousel would now resume sliding.
                $('#moviesCarousel').carousel();
            }
        }
        // End of snippet from Youtube iframe API
    </script>

</body>
</html>
person Niel Godfrey Ponciano    schedule 07.05.2020