javascript - vimeo 视频上的图像或 div

Question

在中间有一个按钮覆盖 vimeo 视频的 div 最方便的方法是什么？我想要的是第一帧在这个 div 后面，当我按下“div”时视频播放。当我暂停视频时，div 再次切换到视频。如果我没有解释清楚，我很抱歉。我想要的基本上是视频中间的自定义播放按钮。当我按下它时，视频开始播放，我的播放按钮随着 div 一起淡出......

不确定标记会是什么样子，但我猜是这样的:

<div class="video-cover">
<button>Play</button>
<iframe></iframe>
</div>

video-cover 类覆盖了视频，当我按下播放键时，它淡出并开始播放。

Answer 1

您最大的障碍不是您的标记。要制作自定义播放/暂停按钮，您需要使用 Vimeo 的 JavaScript API。我会建议 reading through this ，它解释了如何使用他们的 API 执行自定义播放/暂停按钮。

完成这些工作后，您就可以开始担心标记了。

<div class="video-cover">
<iframe></iframe>
<div class="play">Play</div>
</div>

此标记可以工作，您需要将 iframe 的 z-index 设置为低，将 play 设置为高。