在英雄中切换视频

Question

我正在尝试制作 2 个不同的切换视频作为英雄。我将它们称为视频 A 和视频 B。我希望视频 A 在主页上自动播放。我在视频 A 上有一个播放按钮。我希望在单击播放按钮时发生两件事：

1. 隐藏视频 A。
2. 显示视频 B。

点击播放按钮时我成功隐藏了视频A，但视频B不可见（我能听到它在播放，但看不到它）。我认为这是一个 CSS 问题，但不确定。

视频 B 太大而无法上传（我使用的是 WordPress），所以我将它作为 iframe。视频 A 在视频标签内。

HTML：

<video playsinline autoplay muted loop id="poster-video" onclick="hideVid()">
<source src="video.mp4" type="video/mp4">
</video>
<div id="full-video" style="visibility:hidden" onclick="showVid()">
<iframe src="https://player.vimeo.com/video/?autoplay=1&loop=1&title=0&byline=0&portrait=0" frameborder="0" allow="autoplay; fullscreen" allowfullscreen>
</iframe>
</div>
<div id="xbut">
<span style="cursor:pointer" onclick="hideVid();showVid()">
<div class="ctrbutton"><img src="play-button-dark.png">
</div>
</span>
</div>

CSS：

video {
object-fit: cover;
width: 100vw;
position: absolute;
top: 0;
left: 0;
}

js:

function  showVid() {
document.getElementById("full-video").style.display = "block";
}
function  hideVid() {
document.getElementById("poster-video").style.display = "none";
}

Answer 1

当您隐藏视频 A 时，还将视频 B 的可见性设置为 true