Javascript 引导转盘-活动幻灯片上的自动播放视频

我一直在尝试用Bootstrap Carousel制作一部互动纪录片。为此，我希望活动幻灯片上的视频自动播放。我已经读到，除非视频静音，否则自动播放是不可能的，但我不介意你只需点击一次音量按钮，然后自动播放，但我还没有想出如何做到这一点。在Chrome上，没有自动播放的功能，你必须手动播放每一段视频。在使用Safari时，一旦用户以前与页面进行过交互，视频就会自动播放，但问题是它们都会同时自动播放，即使视频位于不活动的幻灯片上（带有声音）。有人知道解决办法吗

我的HTML:

<div id="myCarousel" class="carousel slide" data-interval="false">
<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>

  <div class="carousel-inner">
    <div class="carousel-item active"> 
        <video controls autoplay loop muted class="myvid" id="player">
            <source src="assets/img/intro.mp4" type="video/mp4">
            </video>
    </div>

    <div class="carousel-item">
         <video controls autoplay class="myvid" id="player2">
            <source src="assets/img/Placeholder Video.mp4" type="video/mp4">
            </video>
 </div>

  </div>

  <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Vorige</span>
  </a>
  <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Volgende</span>
  </a>
</div>

  
}).on('slide.bs.carousel', function () {
  document.getElementById('player').pause();
});

/* SLIDE ON CLICK */ 

$('.carousel-indicators > li > a').click(function() {

    // grab href, remove pound sign, convert to number
    var item = Number($(this).attr('href').substring(1));

    // slide to number -1 (account for zero indexing)
    $('#myCarousel').carousel(item - 1);

    // remove current active class
    $('.carousel-indicators .active').removeClass('active');

    // add active class to just clicked on item
    $(this).parent().addClass('active');

    // don't follow the link
    return false;
});

/* AUTOPLAY NAV HIGHLIGHT */

// bind 'slid' function
$('#myCarousel').bind('slid', function() {

    // remove active class
    $('.carousel-indicators .active').removeClass('active');

    // get index of currently active item
    var idx = $('#myCarousel .item.active').index();

    // select currently active item and add active class
    $('.carousel-indicators li:eq(' + idx + ')').addClass('active');

});

提前感谢。

您可以通过以下方式使用：

let allVids=$（“#myCarousel”）.find（“.carousel项目”）；
各功能的所有视频（索引，el）{
如果（索引！==0）{
$（this.find（'video'）[0]。暂停（）；
}
});
$（“myCarousel”）.on（'slide.bs.carousel'，函数（ev）{
let slides=$（this.find（'.carousel item'）；
让pvid=slides[ev.from].querySelectorAll（'video'）[0]；
让vid=slides[ev.to].querySelectorAll（'video'）[0]；
让isplay=vid.currentTime>0&&vid.readyState>2；
视频播放（）；
如果（显示）{
pvid.pause（）；
}
});
#myCarousel{
最大宽度：1200px；
保证金：0自动；
}
.carousel control next、.carousel control prev{
宽度：9%！重要；
}
.旋转木马内部{
背景：#111；
}
.转盘指示器{
底部：-13px！重要；
}
.传送带项目{
垫底：25px；
}
录像带{
宽度：100%；
}




您可以通过以下方式使用：


let allVids=$（“#myCarousel”）.find（“.carousel项目”）；
各功能的所有视频（索引，el）{
如果（索引！==0）{
$（this.find（'video'）[0]。暂停（）；
}
});
$（“myCarousel”）.on（'slide.bs.carousel'，函数（ev）{
let slides=$（this.find（'.carousel item'）；
让pvid=slides[ev.from].querySelectorAll（'video'）[0]；
让vid=slides[ev.to].querySelectorAll（'video'）[0]；
让isplay=vid.currentTime>0&&vid.readyState>2；
视频播放（）；
如果（显示）{
pvid.pause（）；
}
});
#myCarousel{
最大宽度：1200px；
保证金：0自动；
}
.carousel control next、.carousel control prev{
宽度：9%！重要；
}
.旋转木马内部{
背景：#111；
}
.转盘指示器{
底部：-13px！重要；
}
.传送带项目{
垫底：25px；
}
录像带{
宽度：100%；
}




您好，谢谢您的评论。然而，它似乎不起作用。我可能是做了一些错误的链接脚本，他们似乎也删除了我的转盘指标出于某种原因。当我运行代码狙击手时，它开始出现同样的问题：转到下一张幻灯片时，上一个视频仍在播放。但回到过去一次似乎完全解决了这个问题。但是，使用您的代码对我来说没有任何改变，只是删除了指示器。@Lucia将我在代码段顶部包含的4个文件包括在您的应用程序中。@Lucia如果您运行代码段，它看起来确实有效。我不知道我之前做错了什么，但现在它确实有效了！非常感谢。嗨，谢谢你的评论。然而，它似乎不起作用。我可能是做了一些错误的链接脚本，他们似乎也删除了我的转盘指标出于某种原因。当我运行代码狙击手时，它开始出现同样的问题：转到下一张幻灯片时，上一个视频仍在播放。但回到过去一次似乎完全解决了这个问题。但是，使用您的代码对我来说没有任何改变，只是删除了指示器。@Lucia将我在代码段顶部包含的4个文件包括在您的应用程序中。@Lucia如果您运行代码段，它看起来确实有效。我不知道我之前做错了什么，但现在它确实有效了！非常感谢你。