我如何跟进一个视频闪屏页面在HTML与一个按钮

How do I follow up a video splash page in HTML with a button?

本文关键字：一个 HTML 按钮 何跟进 视频 跟进      更新时间：2023-09-26

作为一个噱头，我试图有一个短视频自动播放时，页面加载，然后应该遵循一个'输入'按钮。我在HTML中找到了如何让视频自动播放，但我很难在视频结束后切换到按钮。

我的代码让视频自动播放: 

<video class="video" width="320" height="240" autoplay>
  <source src="Toei.mp4" type="video/mp4">

(添加了一个CSS类来全屏播放)

我添加了一个JS事件当它完成

var video = document.querySelector("video");
video.addEventListener("ended", function(){
	video.setAttribute("button", "newButton")
});

我知道setAttribute方法可能无法改变元素的属性，但我发现很难找到如何:

  • 设置一个事件(视频结束)并将结束元素的属性从'video'更改为'button'

-在CSS中选择这个事件/属性来编辑样式。

这是一个非常简单和简短的视频，后面应该有一个"输入"按钮，以便进入实际的主页。

为什么不直接在视频上添加一个div，让按钮覆盖(例如，绝对定位)。默认情况下隐藏它，然后在"movie ended"处理程序中显示带有按钮的div。

下面是应该这样做的代码。你必须为精确的定位和样式做出调整，当然还要让按钮做点什么/去某个地方。

var video = document.querySelector("video");
video.addEventListener("ended", function() {
	document.getElementById("myBtn").style.display = "block";
});
#myBtn {
  position: absolute;
  top: 0;
  left: 0;
  width: 320px;
  height: 240px;
  text-align: center;
  background-color: #ff0000;
  display: none;
}
#myBtn > button {
  margin-top: 100px;
}
<video id="myVid" class="video" width="320" height="240" autoplay>
  <source src="Toei.mp4" type="video/mp4">
</video>
<div id="myBtn">
  <button type="button">Go Somewhere</button>
</div>

新的#myBtndiv绝对位于视频所在的位置，但#myBtn默认是隐藏的(display: none)。在视频结束事件处理程序中，display样式属性被更改为block，以便#myBtn变得可见并覆盖视频播放器。

相关文章：