如何在 HTML 视频上添加按钮？

Question

这是我第一次使用基本网站以外的 HTML 进行工作。

\n\n

我有一个基于视频的社交媒体应用程序，我想通过 Instagram 等链接分享帖子。\n此链接将是一个视频循环播放的网站，直到用户单击视频上的按钮。按下此按钮后，将播放另一个视频。

\n\n

如何在视频上添加按钮，以便当我单击它时播放另一个视频？\n这就是我所拥有的。

\n\n

<div class="container">\n                <div class="row align-items-center">\n                    <div class="col-md-6 col-lg-5 order-md-2" style="">\n                        <img class="mw-100 mt-lg-0 rounded" src="https://profile_picture.jpeg" alt="image" height="110;" style="transform: translate3d(0px, 4px, 0px);">\n                        <h3><strong class="">Cute cat</strong></h3>\n                        <svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 0 100 20" width="100" class="mb-30 svg-secondary"><path d="m0 9h100v2h-100z" fill-rule="evenodd"></path></svg>\n                        <p class="mb-30 lead" style="">This is a card trick I learned when I was at Magic School</p>\n                        <ul class="list-unstyled padding-x2-list separate-list mb-50">                    \n                        </ul>\n                        <a class="btn btn-outline-warning light" href="https://apps.apple.com/us/app/sampleApp" style=""><span style=""><strong class="">\xef\xa3\xbf  Get it now</strong></span></a>\n                    </div>\n\n                    <div class="col-md-6 mr-auto order-md-1 text-center">\n                        <div class="content-box d-inline-block">\n                            <img class="mw-100 mt-lg-0 rounded" src="https://example000.mp4" alt="image" height="640;" style="transform: translate3d(0px, 4px, 0px);">\n                        </div>\n                    </div>\n                </div>\n            </div>\n

\n

Answer 1

首先，我看到您正在使用img带有视频源的标签。请video改用标签。

Bootstrap 是一款旨在让您在开发网站 UI 时变得更轻松的工具。有用的时候就用它。对于在视频上显示按钮来说，这与其说是一种帮助，不如说是一种矫枉过正。

下面，您将看到在视频上显示按钮的 HTML 和 CSS 代码。需要了解的重要一点是：当您创建一个元素时position: relative，所有子元素都position: absolute将定位在父元素内。在代码中，我们利用这种行为来显示.video-contentover .video。

.video-view {
  position: relative;
  width: 300px;
  height: 100px;
}

.video-view .video {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: #ccc;
}

.video-view .video-content {
  position: absolute;
  bottom: 0px;
}

<div class="video-view">
  <video class="video"></video>
  <div class="video-content">
    <button>Sample</button>
  </div>
</div>