我正在用一个引导4转盘构建一个基本的窄播系统。一些幻灯片包含图像，其他幻灯片包含youtube视频。
当一个div包含一个youtube视频时，我想在幻灯片处于活动状态时自动播放，并在幻灯片处于非活动状态时停止播放。但不知何故，hasclass函数无法识别id=“video-1”的div上的“active”类。

<script type="text/javascript">
    $( document ).ready(function() {
        console.log( "document loaded" ); // added for testing
        if ($("#video-1").hasClass('active')) {
            console.log( "video loaded" ); // added for testing
            $("#ytplayer-1")[0].src += "&autoplay=1";
        } else {
            $("#ytplayer-1")[0].src += "&autoplay=0";
        }          
    });
</script>

这是我的html：

<div id="narrowcasting-carousel" class="carousel slide h-100" data-ride="carousel" data-interval="600000">
    <div class="carousel-inner h-100">
        <div class="carousel-item h-100 item-0" id="no-video" data-interval="10000">
             <img src="/images/image.png" />
        </div>
    </div>
    <div class="carousel-inner h-100">
        <div class="carousel-item h-100 item-1 active" id="video" data-interval="20000">
             <iframe id="ytplayer-1" width="100%" height="100%" src="https://www.youtube.com/embed/[CODE_HERE]?controls=0&amp;loop=0&amp;rel=0&amp;autoplay=0" frameborder="0" allowfullscreen="" allow="autoplay">
    </iframe>
        </div>
    </div>
    <div class="carousel-inner h-100">
        <div class="carousel-item h-100 item-2" id="no-video" data-interval="5000">
             <img src="/images/image.png" />
        </div>
    </div> 
</div>

当我使用onclick事件或击键事件时，它确实起作用。但这显然不是我需要的。