当css可见性为none时暂停视频

Question

我有一系列视频的幻灯片。当他们的容器不可见时，我想暂停它们。我尝试了几种方法，包括可见性监听器的变化和播放/暂停命令。我没有运气好运。

这是我的HTML：

<div id="video" class="mySlides"><video class="video" autoplay loop><source src="icx.mp4" type="video/mp4"></video></div>
<div id="widescreen" class="mySlides">
<!--<div id="written"><video autoplay><source src="written.mp4" 
type="video/mp4"></video></div>
<div id="tbd"><video autoplay><source src="tbd.mp4" type="video/mp4">
</video></div>
<div id="tbd"><video autoplay><source src="tbd.mp4" type="video/mp4">
</video></div>
<div id="tbd"><video autoplay><source src="tbd.mp4" type="video/mp4">
</video></div>
<div id="tbd"><video autoplay><source src="tbd.mp4" type="video/mp4">
</video></div>
<div id="tbd"><video autoplay><source src="tbd.mp4" type="video/mp4">
</video></div>
<div id="tbd"><video autoplay><source src="tbd.mp4" type="video/mp4">
</video></div>
<div id="tbd"><video autoplay><source src="tbd.mp4" type="video/mp4">
</video></div>
<div id="tbd"><video autoplay><source src="tbd.mp4" type="video/mp4">
</video></div>
<div id="tbd"><video autoplay><source src="tbd.mp4" type="video/mp4">
</video></div>
<div id="tbd"><video autoplay><source src="tbd.mp4" type="video/mp4">
</video></div>
<div id="tbd"><video autoplay><source src="tbd.mp4" type="video/mp4">
</video></div>-->
</div>

<div id="last" class="mySlides"><video id="player" class="video" autoplay >
<source src="refresh.mp4" type="video/mp4"></video></div>

我使用计数器循环播放数组，但我希望视频从头开始，所以当refresh.mp4结束并使用以下内容滑过它们时我刷新页面。

脚本。

var slideIndex = 0;
carousel();

function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
  x[i].style.display = "none"; 
}
slideIndex++;
if (slideIndex > x.length) {slideIndex = 1} 
x[slideIndex-1].style.display = "block"; 
setTimeout(carousel, 11000); 

}

这是我当前的javascript尝试暂停视频。我也对jquery选择持开放态度。即使它确实有效（它没有）它只适用于1个元素。我需要它暂停所有不可见的视频。

var videoElement = document.getElementById("player");

function handleVisibilityChange() {
if (document[hidden]) {
videoElement.pause();
} else {
videoElement.play();
}
}