如何隐藏“下一步”按钮，直到一段时间过去或视频播放完毕？

Question

我正在formr平台上建立一个在线调查。在调查中，受访者被展示了一段视频作为实验性的治疗。我想隐藏“下一步”按钮，直到被调查者看完整个视频，或者一段合适的时间过去，以确保被调查者不能跳过治疗。

I've been adviced to use JavaScript to solve this problem，但我还是个新手，经过几个小时的谷歌搜索和一些不成功的尝试后，我转向了你。

如果我遗漏了必要的信息，请告诉我。

最好的

Answer 1

如果要在视频之后显示下一个按钮(假设您使用的是<Video>标签)，请添加一个EventListener以在视频结束时激发。编写一个函数使该按钮可见。并将visibility设置为visible

如下所示：

var media = document.getElementById("myVideo");

media.addEventListener("ended", BtnVisible);

   function BtnVisible(){

            var btnVisible = document.getElementById("show");
            btnVisible.style.visibility = "visible";

   };

和HTML：

<video width="320" height="240" controls id="myVideo">
                    <source src="sam.mp4">
</video>

<button id="show" style="visibility: hidden;">Next</button>

Answer 2

如果你正在使用一个<video>标签，你可以绑定到它的ended事件。

const video = document.querySelector('video');

video.addEventListener('ended', (event) => {
  const button = document.getElementById("nextButton");
  button.style.visibility = "visible";      
});