Html 播放Youtube视频时暂停引导转盘

我制作了一个旋转木马，里面有图像和Youtube视频。 即使视频正在播放旋转木马幻灯片，并且返回到视频时，视频仍在播放

我希望旋转木马在播放视频时暂停，并在箭头单击或视频结束时继续播放

停止视频，如果它正在播放并且用户单击了旋转木马箭头

HTML:

---

我怎样才能做到这一点？我找不到类似的问题。

你的两个问题与我今天早些时候提出的问题一字不差~

要想让Youtube iframe视频在播放视频时触发旋转木马滑动暂停，您需要有一个视频是否被视为“正在播放”的指示器。您可以通过使用带有JavaScript的Youtube iframe API的播放器功能来实现这一点

聆听涉及以下状态的事件：

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

然后控制引导转盘滑动通过

。转盘（'pause'）

：

为了能够监听此类事件，您可以在JavaScript中添加一个名为“onPlayerStateChange”的函数（如Youtube iframe API中所述）：

要在触发幻灯片时停止视频（如果用户单击上一个或下一个箭头）：

以下是完整的工作HTML（直接工作，无需修改），以供参考：

上
下一个
$（文档）.ready（函数（）
{
//单击按钮后滑动旋转木马
//.carousel（'prev'）-循环到上一个项目
//.carousel（'next'）-循环到下一个项目。
//参考：https://getbootstrap.com/docs/4.4/components/carousel/#methods
$（'#prevMovie'）。在（'单击'，函数（）上）{
$（'moviesCarousel'）。carousel（'prev'）；
});
$（'#nextMovie'）。在（'click'，function（）上{
$（'moviesCarousel'）。carousel（'next'）；
});
//发生幻灯片时，暂停正在播放的当前iframe视频
//player.pauseVideo（）：Void-暂停当前正在播放的视频。
//参考：https://developers.google.com/youtube/iframe_api_reference#Playback_controls
$（'moviesCarousel'）。on（'slide.bs.carousel'，函数（事件）{
//变量“players”包含每个iframe视频的每个Youtube播放器
//参考：https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player
//event.from-当前视频的索引（幻灯片出现之前）
//-它也是当前视频对应播放器的索引
//参考：https://getbootstrap.com/docs/4.4/components/carousel/#events
玩家[event.from].pauseVideo（）；
});
});
//代码段的起始位置：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（标记，firstScriptTag）；
var players=[]；//每个iframe视频将包含一个播放器
函数onyoutubeiframeapiredy（）
{
var allMovieIframes=document.getElementById（“moviesCarousel”）.getElementsByTagName（“iframe”）；
用于（所有电影帧的当前帧）
{
球员推（新球员）(
currentIFrame.id，//目标iframe视频，这里是katniss、rancho或logan
{事件：{'onStateChange'：onPlayerStateChange}
));
}
}
函数onPlayerStateChange（event）//每次播放、暂停、结束“播放器”列表中的任何iframe视频播放器时触发。
{
//检查是否正在播放任何iframe视频（或当前正在缓冲播放）
//参考：https://developers.google.com/youtube/iframe_api_reference#Events
if（event.data==YT.PlayerState.PLAYING | | event.data==YT.PlayerState.BUFFERING）
{
//如果检测到任何播放机当前正在播放或缓冲，请暂停旋转木马的滑动
//.carousel（‘暂停’）-停止旋转木马在项目之间循环。
//参考：https://getbootstrap.com/docs/4.4/components/carousel/#methods
$（'电影旋转木马'）。旋转木马（'暂停'）；
}
其他的
{
//如果当前没有播放或缓冲视频，请恢复旋转木马的滑动。
//这意味着
<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>

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();
});

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