在英雄中切换视频

编程问答 2022-04-28

问题描述

我正在尝试制作 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";
}

解决方法

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

iframeiframejavascriptonclickonclickonclickpostervideovideo